vue-router路由跳转created不执行，页面不刷新的解决办法

沸羊羊yang

于 2020-03-19 21:03:54 发布

阅读量1.3w

点赞数 1

文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/shine1162226/article/details/104976606

版权

本文介绍在Vue中，当多个路由复用同一组件且路由参数变化时，页面不刷新的问题及其解决办法。利用vue-router的beforeRouteUpdate钩子，可在路由参数变化时重新获取数据，确保页面内容更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-router路由跳转created不执行页面不刷新的解决办法

当使用路由参数时，多个路由绑定同一个组件，再切换页面时，因为多个路由都渲染同个组件，此时不会销毁再创建组件而是会复用组件，这也就导致路由参数发生变化，但是页面不会刷新的问题

解决办法：
可以通过vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave 路由进入钩子

beforeRouteEnter(to, from, next) {
// 在组件实例创建前调用
}

beforeRouteUpdate 路由更新钩子

beforeRouteUpdate
beforeRouteUpdate(to, from, next){
// 在当前路由改变，路由参数发生变化，组件被复用时调用
// 里面写获取刷新数据的方法
}

beforeRouteLeave 路由离开钩子

beforeRouteLeave(to, from, next) {
// 当离开当前组件对应的路由时调用
}