溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
問題描述：
使用vue動態路由（“/route/:id” 形式） 傳參的時候，修改頁面參數，但是視圖仍舊是之前的內容，沒有進行刷新，示例如下：
原因分析：
具體原因在vue官方文檔：響應路由參數的變化一節中有講過：
當使用路由參數時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被復用。因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調用。
復用組件時，想對路由參數的變化作出響應的話，你可以簡單地 watch (監測變化) $route 對象
（摘自vue文檔）
解決辦法：
方法一： watch (監測變化) $route 對象
watch: {
'$route' (to, from) {
// 監聽路由的變化，做你想做的一些事情...
// this.init()
}
},
方法二：使用 vue-router 2.2 中引入的 beforeRouteUpdate 導航守衛：
export default {
data () {
return {
errCode: '',
info: {}
}
},
beforeRouteUpdate (to, from, next) {
// 做一些想要做的處理...
// this.errCode = to.params.code
// this.info = formatErrorMsg(this.errCode)
next() // 一定要有next
},
// ...
}
方法二中需要注意的是，一定要有next()
以上這篇vue動態路由:路由參數改變,視圖不更新問題的解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
