在Vue中切換路徑時福压，如果下一個路由與當(dāng)前頁面共用同一個組件掏秩，Vue會復(fù)用當(dāng)前組件，不會重新創(chuàng)建一個荆姆。這就導(dǎo)致組件的生命周期函數(shù)如mounted, created等不會被觸發(fā)蒙幻，頁面看起來就像什么都沒發(fā)生一樣。
在vue-router 2.2版本之后胆筒，可以使用beforeRouteUpdate這個導(dǎo)航守衛(wèi)來監(jiān)聽同一個路由更新參數(shù)時的情況邮破，但這個守衛(wèi)并不會在不同路由共用同一組件時觸發(fā)。
舉例來說腐泻，有下面這一組路由：
const route = [
{
path: '/item/:id/edit',
name: 'editItem',
component: Editor,
}, {
path: '/item/create',
name: 'createItem',
component: Editor,
}
];
當(dāng)從/item/22/edit切換到/item/11/edit時决乎，會觸發(fā)beforeRouteUpdate。
但如果從/item/22/edit切換到/item/create時派桩，并不會觸發(fā)beforeRouteUpdate构诚。
解決方法
如果上面兩個狀況都要監(jiān)聽到，可以選擇監(jiān)聽$route參數(shù)铆惑，當(dāng)url發(fā)生變化時范嘱，都會引起$route的改變，在監(jiān)聽函數(shù)里執(zhí)行需要的操作员魏。
watch: {
'$route': function() {
if (this.$route.name === 'createItem') {
...
} else if (this.$route.name === 'editItem') {
...
}
}
}
