問題描述：

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為景寧畬族自治企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)，景寧畬族自治網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

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

原因分析：

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

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

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

（摘自vue文檔）

解決辦法：

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

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動(dòng)態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。