vue三种路由传参方式：路由属性push方法、params、query

vue路由传参的三种方式：

场景：点击当前页的某个按钮跳转到另一个页面，并将某个值带过去

<div class=“item” @click=“getDetail(3)”>查看详情

1、直接使用路由属性配置this.$router.push实现携带参数跳转

methods:{
        getDetail(id){
            this.$router.push({path:`/user/${id}/`})
        }
    }
           

对应的路由配置(每个路由配置信息以对象的形式保存)

import VueRouter from 'vue-router'; //引入vue-router
   Vue.config.producionTip = false; //阻止启动生产消息
   Vue.use(VueRouter); //使用VueRouter，注入到Vue实例中
   const router = new VueRotuer({ //创建路由对象
       mode:'history', //设置路由模式为history模式
       {
          path:'/user/:id',
          name:'User',
          component:User
       }
   });
   //将路由对象添加到vue实例对象中
   new Vue({router,render:h=>h(App)}).$mount('#app'); 
           

子组件中获取并使用传过来的参数值

补充一点额外的东西：

Vue.config.producionTip = false

; 这是啥意思？

开发环境下，Vue 会提供很多警告信息来帮你对付常见的错误与陷阱。

而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。

此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。

Vue.config.producionTip = false; 可以当做是消息提示的环境配置，

false即设置为开发环境下，true即生产环境下

2、通过路由属性中的name来匹配路由，然后通过params来传递参数。

注意：params方式传参刷新页面时，参数会丢失！

methods：{
        getDetail(id) {
            this.$router.push({
                name: 'User',
                params: { id: id }
            })
        }
    }
           

对应路由配置

{ 
       path: '/user', 
       name: 'User', 
       component: User 
     }
           

子组件获取参数

3、使用路由属性中的path来匹配路由，然后通过query来传递参数

注意：这种情况下 query传递的参数会显示在url后面,

如 /user?id=？即参数再浏览器刷新时不会丢失！

methods：{
        getDetail(id) {
            this.$router.push({
                path: '/user',
                query: { id: id }
            })
        }
    }
           

对应路由配置

{ 
      path: '/user', 
      name: 'User', 
      component: User 
    }
           

子组件获取参数

4、params和query路由传参的区别

（1）使用方面

query用path来匹配路由,接收参数this. r o u t e . q u e r y . n a m e 。 p a r a m s 用 n a m e 来 匹 配 路 由 ， 接 收 参 数 t h i s . route.query.name。 params用name来匹配路由，接收参数this. route.query.name。params用name来匹配路由，接收参数this.route.params.name。

注意：

如果params方式写成path引入，接收的参数会是undefined。

（2）浏览器地址栏显示方面

query传参方式，在地址栏会显示参数；

params传参方式，地址栏不显示参数。

//用params传参方式的参数用/来间隔显示，如/login/10/tom；

//用query传参方式的参数url+?参数1=xx&参数2=xx，如/login?id=1&name=tom

注意：如果你在地址栏中手动输入参数后，当页面一刷新时，params的值就消失了。