vue-router组件复用共享$route的问题

当两个页面如/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的值，就是所期望的值了

转载于:https://juejin.im/post/5cc01554f265da039955decd