vue父子组件路由传参的方式

 

一、get方式（url传参）：

1.动态路由传参：
父组件：

 selectItem (item) {
   this.$router.push({
     path: `/recommend/${item.id}`
   })
 }

router.js:

    { path: '/recommend', component: Recommend, children: [ { path: ':id', // 【或者/recommend/:id】 component: Disc }
      ]
    },

子组件：

this.$route.params

2.静态路由传参：
父组件：

    selectItem (item) {
      this.$router.push({
        path: '/recommend/disc',
        query: {
          id: item.dissid
        }
      })
    },

router.js：

    { path: '/recommend', component: Recommend, children: [ { path: 'disc', // 【或者/recommend/disc】 component: Disc }
      ]
    },

子组件：

this.$route.query

二、post方式传参：

这种方式是匹配name传参：

父组件：

 selectItem (item) {
   this.$router.push({
     name: `disc`,  //这里的name对应router.js中的name 【必填】
     params: {
       id: item.id  // 【或者/recommend/disc】
     }
   })

router.js：

  { path: '/recommend', name: 'recommend', component: Recommend, children: [ { path: '/recommend/disc', name: 'disc', component: Disc }
    ]
  }

子组件：

 created () {
   console.log(this.$route.params)  //访问参数
 }

总结：

post方式传参是匹配name进行路由，使用this.$route.params获取；
get方式是匹配path，分为静态路由和动态路由2种。
动态路由： 使用params传参，this.$router.params获取；参数在路由中
静态路由： 使用query传参，this.$router.query获取；参数在参数中
在router.js中子路由的path有2中方式书写：全路径：/recommend/disc 或者 短路径：disc；

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