方法一：在router-view里添加key控制
這樣的弊端是如果router-view里包含其他組件，切換其他組件會(huì)讓其他組件也重新渲染。文章來源：http://www.zghlxwxcb.cn/news/detail-729894.html
這樣的問題是導(dǎo)致切換路由會(huì)閃爍一下。因?yàn)榍袚Q后所有鉤子函數(shù)都重新觸發(fā)了。文章來源地址http://www.zghlxwxcb.cn/news/detail-729894.html
// .vue中
<router-view :key="key" /> //必須加上key屬性，讓每次進(jìn)入路由時(shí)都重新觸發(fā)鉤子函數(shù)
computed: {
key() {
// 只要保證 key 唯一性就可以了，保證不同頁(yè)面的 key 不相同
return this.$route.Path
}
},
// 在路由文件中，讓多個(gè)路由共用同一個(gè)組件，保證路由path和name屬性具有唯一性 。
children: [
{
path: 'goods1',
name: 'goods1',
component: () => import('@/views/menus/goods/Goods')
},
{
path: 'goods2',
name: 'goods2',
component: () => import('@/views/menus/goods/Goods')
}
]
/**
*
* 多個(gè)頁(yè)面公用同一個(gè)組件時(shí)：通過以上方法，會(huì)使得切換所有子組件都重新渲染相應(yīng)子組件。
* 如果父組件下只有A B 組件需要共用，還有C D組件不需要公用，切換C D組件也同樣會(huì)重新渲染C D ，影響性能。
* 還可以用第二種方法：通過監(jiān)聽路由的變化，來重寫初始數(shù)據(jù)
*/
方法二：通過監(jiān)聽路由的方法來重新觸發(fā)鉤子函數(shù)
// 1.
watch: {
$route:{
handler:'resetData',
}
},
// 2.
methods:{
resetData() {
if(this.$route.fullPath=='/strategy'){
//在這里獲取并處理該路由下所需要的數(shù)據(jù)。
}
}
到了這里，關(guān)于vue 實(shí)現(xiàn)多個(gè)路由共用同一個(gè)頁(yè)面組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
