vue如何實現(xiàn)不同路由的組件復(fù)用

這篇文章主要為大家展示了“vue如何實現(xiàn)不同路由的組件復(fù)用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue如何實現(xiàn)不同路由的組件復(fù)用”這篇文章吧。

不同路由的組件復(fù)用

1 場景還原

當(dāng)某個場景中vue-router從/post-page/a，跳轉(zhuǎn)到/post-page/b。然后我們驚人的發(fā)現(xiàn)，頁面跳轉(zhuǎn)后數(shù)據(jù)竟然沒更新？！原因是vue-router"智能地"發(fā)現(xiàn)這是同一個組件，然后它就決定要復(fù)用這個組件，所以你在created函數(shù)里寫的方法壓根就沒執(zhí)行。通常的解決方案是監(jiān)聽$route的變化來初始化數(shù)據(jù)，如下：

data() {
 return {
 loading: false,
 error: null,
 post: null
 }
},
watch: {
 '$route': { // 使用watch來監(jiān)控是否是同一個路由
 handler: 'resetData',
 immediate: true
 }
},
methods: {
 resetData() {
 this.loading = false
 this.error = null
 this.post = null
 this.getPost(this.$route.params.id)
 },
 getPost(id){ }
}

2 優(yōu)化

那要怎么樣才能實現(xiàn)這樣的效果呢，答案是給 router-view 添加一個不同的key，這樣即使是公用組件，只要url變化了，就一定會重新創(chuàng)建這個組件。

<router-view :key="$route.fullpath"></router-view>

還可以在其后加 + +new Date() 時間戳，保證獨一無二

以上是“vue如何實現(xiàn)不同路由的組件復(fù)用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！