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