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