Vue多個路由綁定同一組件造成created不執(zhí)行的解決辦法。
具體開發(fā)中遇到的需求是：
多個頁面調(diào)用同一組件，通過傳參獲取不同的數(shù)據(jù)展示在頁面上。多個路由映射到同個組件，只是傳參不同，頁面切換不會觸發(fā)組件的創(chuàng)建cteated方法，怎么辦？
這里貼出官方給出的解決辦法：
https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96
通過watch（監(jiān)測變化） $route 對象，將獲取數(shù)據(jù)的方法寫在watch里
后來具體我們嘗試了以下幾種方法都可實現(xiàn)：
方法一：query傳參
router.js（路由配置）
{
path: '/back',
redirect: '/back/yjzx',
component: viewport,
children: [
{ path: 'yjzx', name: 'yjzx', component: article }
]
}Vue（其他頁面調(diào)用）
<router-link :to="{name:'yjzx', query: {type: '1'}}" tag="li"><!--多個router-link的name一樣或不一樣都可，因為帶的參數(shù)不一樣-->
<i class="fa fa-list-ul fa-fw"></i>
<span>業(yè)界資訊</span>
</router-link>Vue（頁面代碼）
watch: {
'$route' (to, from) {
console.log(this.$route.query)
}
},方法二：params傳參
router.js（路由配置）
{
path: '/back',
redirect: '/back/yjzx',
component: viewport,
children: [
{ path: 'yjzx', name: 'yjzx', component: article }
]
}Vue（其他頁面調(diào)用）
<router-link :to="{name:'yjzx', params: {type: '1'}}" tag="li"><!--多個router-link的name必須不一樣，因為參數(shù)是以POST方式傳遞-->
<i class="fa fa-list-ul fa-fw"></i>
<span>業(yè)界資訊</span>
</router-link>Vue（頁面代碼）
watch: {
'$route' (to, from) {
console.log(this.$route.params)
}
},方法三：通過變量傳參
router.js（路由配置）
{
path: '/back',
redirect: '/back/yjzx/:type',
component: viewport,
children: [
{ path: 'yjzx/:type', name: 'yjzx', component: article }
]
}Vue（其他頁面調(diào)用）
<router-link :to="{path:'/back/yjzx/1'}" tag="li"><!--多個router-link的name一樣或不一樣都可，因為參數(shù)不同-->
<i class="fa fa-list-ul fa-fw"></i>
<span>業(yè)界資訊</span>
</router-link>Vue（頁面代碼）
watch: {
'$route' (to, from) {
console.log(this.$route.params)
}
},3種方式都實踐過，都可以實現(xiàn)，看個人的愛好和項目情況來定吧。
