這篇文章主要為大家展示了“vue如何實現不同路由的組件復用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue如何實現不同路由的組件復用”這篇文章吧。
不同路由的組件復用
1 場景還原
當某個場景中vue-router從/post-page/a，跳轉到/post-page/b。然后我們驚人的發現，頁面跳轉后數據竟然沒更新？！原因是vue-router"智能地"發現這是同一個組件，然后它就決定要復用這個組件，所以你在created函數里寫的方法壓根就沒執行。通常的解決方案是監聽$route的變化來初始化數據，如下：
data() {
return {
loading: false,
error: null,
post: null
}
},
watch: {
'$route': { // 使用watch來監控是否是同一個路由
handler: 'resetData',
immediate: true
}
},
methods: {
resetData() {
this.loading = false
this.error = null
this.post = null
this.getPost(this.$route.params.id)
},
getPost(id){ }
}2 優化
那要怎么樣才能實現這樣的效果呢，答案是給 router-view 添加一個不同的key，這樣即使是公用組件，只要url變化了，就一定會重新創建這個組件。
<router-view :key="$route.fullpath"></router-view>
還可以在其后加 + +new Date() 時間戳，保證獨一無二
以上是“vue如何實現不同路由的組件復用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
