vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決
更新時間：2019年11月05日 14:55:52 作者：@xiaomajia
今天小編就為大家分享一篇vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
問題描述：
使用vue動態(tài)路由（“/route/:id” 形式） 傳參的時候，修改頁面參數(shù)，但是視圖仍舊是之前的內(nèi)容，沒有進行刷新，示例如下：
原因分析：
具體原因在vue官方文檔：響應路由參數(shù)的變化一節(jié)中有講過：
當使用路由參數(shù)時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被復用。因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調(diào)用。
復用組件時，想對路由參數(shù)的變化作出響應的話，你可以簡單地 watch (監(jiān)測變化) $route 對象
（摘自vue文檔）
解決辦法：
方法一： watch (監(jiān)測變化) $route 對象
watch: {
'$route' (to, from) {
// 監(jiān)聽路由的變化，做你想做的一些事情...
// this.init()
}
},
方法二：使用 vue-router 2.2 中引入的 beforeRouteUpdate 導航守衛(wèi)：
export default {
data () {
return {
errCode: '',
info: {}
}
},
beforeRouteUpdate (to, from, next) {
// 做一些想要做的處理...
// this.errCode = to.params.code
// this.info = formatErrorMsg(this.errCode)
next() // 一定要有next
},
// ...
}
方法二中需要注意的是，一定要有next()
以上這篇vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue3實現(xiàn)旋轉(zhuǎn)圖片驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了詳解服務(wù)端預渲染之Nuxt（介紹篇）,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
Vue.js是一個流行的前端JavaScript框架,用于構(gòu)建用戶界面和單頁應用,這篇文章主要給大家介紹了關(guān)于VUE3常見面試題總結(jié)的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
Vue3中el-table表格數(shù)據(jù)不顯示的原因和解決方法
這篇文章主要給大家介紹了Vue3中el-table表格數(shù)據(jù)不顯示的原因和解決方法,文中有詳細的代碼示例供大家參考,如果有遇到相同問題的朋友可以參考閱讀本文,希望能夠幫到您2023-11-11
vue-cli3.0如何使用CDN區(qū)分開發(fā)、生產(chǎn)、預發(fā)布環(huán)境
這篇文章主要介紹了vue-cli3.0如何使用CDN區(qū)分開發(fā)、生產(chǎn)、預發(fā)布環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue中keep-alive組件實現(xiàn)多級嵌套路由的緩存
本文主要介紹了vue中keep-alive組件實現(xiàn)多級嵌套路由的緩存，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue-cli3 從搭建到優(yōu)化的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
對插槽的這種改變讓我對發(fā)現(xiàn)插槽的潛在功能感興趣，以便為我們基于Vue的項目提供可重用性，新功能和更清晰的可讀性。這篇文章主要介紹了vue 2.6 中 slot 的新用法,需要的朋友可以參考下2019-07-07
解決betterScroll在vue中存在圖片時,出現(xiàn)拉不動的問題
今天小編就為大家分享一篇解決betterScroll在vue中存在圖片時,出現(xiàn)拉不動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
文章主要介紹了Vue3中的響應式數(shù)據(jù)處理機制,包括ref和reactive函數(shù)的使用,它們的區(qū)別,以及如何使用watch和watchEffect來監(jiān)聽數(shù)據(jù)變化,文章最后提到了Vue3的生命周期鉤子和自定義hooks的概念,感興趣的朋友跟隨小編一起看看吧2024-11-11