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

vue路由传参的三种方式：

场景：点击当前页的某个按钮跳转到另一个页面，并将某个值带过去
<div class=“item” @click=“getDetail(3)”>查看详情

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

    methods:{
        getDetail(id){
            this.$router.push({path:`/user/${id}/`})
        }
    }
1
2
3
4
5

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

   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'); 
1
2
3
4
5
6
7
8
9
10
11
12
13

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

   this.$route.params.id
1

补充一点额外的东西：
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 }
            })
        }
    }
1
2
3
4
5
6
7
8

对应路由配置

     { 
       path: '/user', 
       name: 'User', 
       component: User 
     }
1
2
3
4
5

子组件获取参数

     this.$route.params.id
1

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

注意：这种情况下 query传递的参数会显示在url后面,
如 /user?id=？即参数再浏览器刷新时不会丢失！

    methods：{
        getDetail(id) {
            this.$router.push({
                path: '/user',
                query: { id: id }
            })
        }
    }
1
2
3
4
5
6
7
8

对应路由配置

    { 
      path: '/user', 
      name: 'User', 
      component: User 
    }
1
2
3
4
5

子组件获取参数

    this.$router.query.id
1

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

（1）使用方面
query用path来匹配路由,接收参数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的值就消失了。