大家好，我是大澈！
本文约1100+字，整篇阅读大约需要2分钟。
感谢关注微信公众号：“程序员大澈”，免费领取”面试礼包“一份，然后免费加入问答群，从此让解决问题的你不再孤单！
1. 需求分析
在Vue中，偶尔会遇到一个很奇怪的问题。
当我们多次使用 router.push() 方法，向同一路由组件跳转时。
此时，如果只是传入的参数不同，就会出现 url 地址变了，但是页面没有重新请求数据、生命周期函数未调用、页面未重新渲染等问题。
最后，我们需要手动刷新一下页面，才会有页面内容的更新。
没听明白问题？没关系，下面看一下该问题的动画演示。
如下图，当点击详情1按钮，跳转到详情1组件，并显示内容为携带的参数1。然后，再点击详情2按钮，跳转到详情2组件，并显示内容为携带的参数2。
此时问题出现了，点击详情2按钮时，虽然地址栏中的路由变化了，但是组件的内容仍然显示的是上次跳转携带的参数1。
看到这个问题，可能对于一些朋友来说，比较简单，此时欢迎你的指教与补充。
然后下面，我们就一起来聊聊该问题的原因，以及盘点一下该问题解决的几种常见方式。
2. 问题实现
先来聊聊该问题的原因，再分开说一下该问题几种常见解决方式的实现。
下面所有实现示例，都是Vue3代码！
2.1 问题原因
Vue Router 默认情况下，会复用相同组件的实例，而不是销毁和重新创建它们。
这种复用的机制可以提高性能，并且在大多数情况下是符合预期的。
即 /Details/1 => /Details/2 或者 /Details?id=1 => /Details?id=2 ，这类链接跳转时, 原来的组件实例会被复用。
因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用，进而导致页面不再被更新。
2.2 方式一 在路由入口上添加key
这个方式我觉得是最好用的。
这个要写在相同的那个路由组件的路由入口处。
<RouterView :key="route.fullPath" />
2.3 方式二 watch监听路由变化
这个要写在相同的那个路由组件中。
watch(route, (to) => {
// 这里写要更新的东西
}, {immediate: true})
2.4 方式三 使用路由守卫
使用7种路由守卫，这里我只尝试了其中一个。
这个要写在相同的那个路由组件中。
router.beforeEach((to, from, next) => {
// 这里写要更新的东西
next()
})
2.5 小结
Vue Router 默认情况下，会复用相同组件的实例，而不是销毁和重新创建它们。
所以会出现，多次跳转同一路由组件时页面不更新的问题。
解决方式有如下几种：
方式一，在router-view上添加key。这个方法比较简单，推荐。
方式二，watch监听路由变化。
方式三，使用路由守卫。
当然，该问题的解决方法肯定还有很多，欢迎朋友们补充！
结语
建立这个平台的初衷：
- 打造一个专注于前端功能问题的问答平台，让大家高效搜索处理同样问题。
- 遇到有共鸣的问题，与众多同行朋友们一起讨论，一起沉淀成长。
- 平台现拥有功能问题、技术资讯、实用干货3个专栏内容。
感谢关注微信公众号：“程序员大澈”，免费领取”面试礼包“一份，然后免费加入问答群，从此让解决问题的你不再孤单！
原文链接：https://juejin.cn/post/7328317423097036838 作者：程序员大澈
