Vue-router组件切换中，如何避免重用导致的潜在问题？

本文共计956个文字，预计阅读时间需要4分钟。

问题描述：vue-router导航切换时，若两个路由都渲染同一个组件，组件会重用（chong），组件的生命周期钩子不会再次被调用，使得组件的一些数据无法根据path的变化得到更新，导致翻车现场再现实。

问题描述：vue-router导航切换 时，如果两个路由都渲染同个组件，组件会重（chong）用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新

翻车现场再现：

这是我的/router/index.js 的内容节选

export default new Router({ routes: [ { path: '/main', component: Main }, { path: '/get', component: Main } ] })

这是我的 Main.vue的内容节选

<p>{{$router.currentRoute.path}}</p>

以上情景很明显 ，我是想要显示路由跳转前和路由跳转后的 path值

路由从 /main 跳转到了 /get ，理想情况是 网页中显示的路由从 /main 变成了 /get

但事实是网页没有一点变化 ,显示的内容依然是 /main

车祸原因分析

从我的车况来看， 我的这次路由跳转前后使用了完全相同的组件 ，通过仔细查看vue-router文档对应位置 ，发现了如下关键内容

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。