Vue多个路由共用同一组件时，互相切换时更新组件

Posted 2023-04-27

参考技术A 在Vue中切换路径时，如果下一个路由与当前页面共用同一个组件，Vue会复用当前组件，不会重新创建一个。这就导致组件的生命周期函数如mounted, created等不会被触发，页面看起来就像什么都没发生一样。
在vue-router 2.2版本之后，可以使用 beforeRouteUpdate 这个导航守卫来监听同一个路由更新参数时的情况，但这个守卫并不会在不同路由共用同一组件时触发。
举例来说，有下面这一组路由：

当从 /item/22/edit 切换到 /item/11/edit 时，会触发 beforeRouteUpdate 。
但如果从 /item/22/edit 切换到 /item/create 时，并不会触发 beforeRouteUpdate 。

如果上面两个状况都要监听到，可以选择监听 $route 参数，当url发生变化时，都会引起 $route 的改变，在监听函数里执行需要的操作。

当多个路由地址对应同一组件时，切换路由组件不刷新的问题

参考技术A 在vue官方文档中进行了如下描述：

解释一下：当我们使用 动态路由 或者在 路由上拼接参数 时，进行页面组件跳转,如果前后跳转都使用了同一个组件，这就导致我们后面的路由跳转会使用前一次组件实例，因此组件不会重新渲染加载

当我们想传递参数后，组件重新渲染组件实例，可以使用vue官方文档提供的方案：

如果我们对"路由变化作出响应是"==============> 刷新当前组件的话 ：

可以使用： this.$router.go(0)  来刷新当前组件