欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決

 更新時間：2019年11月05日 14:55:52   作者：@xiaomajia  
今天小編就為大家分享一篇vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

問題描述：

使用vue動態(tài)路由（“/route/:id” 形式） 傳參的時候，修改頁面參數(shù)，但是視圖仍舊是之前的內(nèi)容，沒有進行刷新，示例如下：

原因分析：

具體原因在vue官方文檔：響應(yīng)路由參數(shù)的變化一節(jié)中有講過：

當(dāng)使用路由參數(shù)時，例如從 /user/foo 導(dǎo)航到 /user/bar，原來的組件實例會被復(fù)用。因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調(diào)用。

復(fù)用組件時，想對路由參數(shù)的變化作出響應(yīng)的話，你可以簡單地 watch (監(jiān)測變化) $route 對象

（摘自vue文檔）

解決辦法：

方法一： watch (監(jiān)測變化) $route 對象

watch: {
  '$route' (to, from) {
   // 監(jiān)聽路由的變化，做你想做的一些事情...
   // this.init()
  }
},

方法二：使用 vue-router 2.2 中引入的 beforeRouteUpdate 導(dǎo)航守衛(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)文章

最新評論