Vue中相同路由页面不刷新解决方法

在Vue官方文档中提到，当使用路由参数时，例如从 /user?id=1 导航到 /user?id=2，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

但是有时候确实需要通过刷新界面渲染不同的数据，官方也给出了两种方法决绝组件复用的问题。

watch (监测变化) $route 对象：

<script>
export default {
	...
	watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}
</script>

beforeRouteUpdate 导航守卫：

<script>
export default {
	...
	beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}
</script>

这两种方法在路由发生变化时，可以发送网络请求，将请求的数据渲染到页面中，因为Vue是一个响应式框架，当数据发生改变，界面的数据也发生改变。

来源：CSDN

作者：夜空中最亮的星

链接：https://blog.csdn.net/weixin_43762209/article/details/104518865