vue-route传参方式

一：方案一

路由配置：

{
      path: '/about/:id',
      name: 'about',
      component: () =>
        import ('./views/About.vue')
    }

触发方式：

 getClick(){
      this.$router.push( '/about/123' );
 }

获取方式：

this.$route.params.id

二：方案二

路由配置：

{
      path: '/about',
      name: 'about',
      component: () =>
        import ('./views/About.vue')
    }

触发方式：

 getClick(){
      this.$router.push( {name:'about',params:{id:123}} );//注意如果name换成path ,params获取不到
 }

获取方式：

this.$route.params.id

二：方案二

路由配置：

{
      path: '/about',
      name: 'about',
      component: () =>
        import ('./views/About.vue')
    }

触发方式：

 getClick(){
      this.$router.push( {name:'about',query:{id:123}} );
 }

获取方式：

this.$route.query.id

总结：

　　方法二与方法三区别：params类比ajax中的post请求在url地址栏是看不到传参的，用query类比ajax中的get请求在url地址栏是可以看到传参；

参考：https://segmentfault.com/a/1190000012393587