美文网首页Vue.js
vue 路由跳转页面生命周期不执行的问题(数据不更新)

vue 路由跳转页面生命周期不执行的问题(数据不更新)

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-05-01 11:11 被阅读0次

大致有两种原因

1、 keep-alive组件包裹了<routr-view/>组件被缓存了

使用路由跳转时不会调用created(),mounted()函数,但是会调用actived()和deactived()生命周期

2、vue-router导航切换时,两个路由都渲染同个组件

组件生命周期不会再调用,组件依然显示上一个路由渲染出来的东西

解决方法:

第一种:在watch中监听路由变化,对router进行监控,当router发生变化时,执行初始化界面方法

第二种:给router-view添加唯一key

增加一个不同:key值,这样vue就会识别这是不同的了。


第三种方法:使用生命周期函数 :activated

相关文章

网友评论

    本文标题:vue 路由跳转页面生命周期不执行的问题(数据不更新)

    本文链接:https://www.haomeiwen.com/subject/qcjyyrtx.html