當兩個頁面如/product/a和/product/b都指向同一個元件：product.vue時，元件內部拿到的this.$router是相同的，也就是元件共享，路由例項也共享，這造成在某些非同步操作時，獲取this.$route.path不是預期的值，尤其是使用了keep-alive元件時，給我們帶來一些麻煩
其實解決辦法很簡單
雖然路由例項this.$router是共享的，但是元件例項this則是獨立，那麼就想到了在元件的某個生命週期如mounted階段，我們可以建立一個變數
mounted() {
this.$copyRoute = Object.assign({}, this.$route)
}
複製程式碼到這一步，我猜你已經知道怎麼個回事了吧？沒錯就是關於物件引用的問題，元件複用時，vue會使用相同的路由物件，但是地址切換時，它沒有改變元件對應路由例項的地址，只是改變裡面某些值，如path、fullPath這些值
我們在元件完成渲染時，把路由例項給淺（或深）拷貝一份，然後讀取this.$copyRoute.path的值，就是所期望的值了