Vue多個路由共用同一元件時，互相切換時更新元件

Harlan2016發表於2018-01-19
Vue路由元件

在Vue中切換路徑時，如果下一個路由與當前頁面共用同一個元件，Vue會複用當前元件，不會重新建立一個。這就導致元件的生命週期函式如mounted, created等不會被觸發，頁面看起來就像什麼都沒發生一樣。 在vue-router 2.2版本之後，可以使用beforeRouteUpdate這個導航守衛來監聽同一個路由更新引數時的情況，但這個守衛並不會在不同路由共用同一元件時觸發。 舉例來說，有下面這一組路由：

const route = [
  {
    path: '/item/:id/edit',
    name: 'editItem',
    component: Editor,
  }, {
    path: '/item/create',
    name: 'createItem',
    component: Editor,
  }
];
複製程式碼

當從/item/22/edit切換到/item/11/edit時，會觸發beforeRouteUpdate。 但如果從/item/22/edit切換到/item/create時，並不會觸發beforeRouteUpdate。

解決方法

如果上面兩個狀況都要監聽到，可以選擇監聽$route引數，當url發生變化時，都會引起$route的改變，在監聽函式裡執行需要的操作。

watch: {
  '$route': function() {
    if (this.$route.name === 'createItem') {
      ...
    } else if (this.$route.name === 'editItem') {
      ...
    }
  }
}
複製程式碼

相關文章