大致有两种原因
1、 keep-alive组件包裹了<routr-view/>组件被缓存了
使用路由跳转时不会调用created(),mounted()函数,但是会调用actived()和deactived()生命周期
![](https://img.haomeiwen.com/i27493437/504254210b101804.png)
2、vue-router导航切换时,两个路由都渲染同个组件
组件生命周期不会再调用,组件依然显示上一个路由渲染出来的东西
![](https://img.haomeiwen.com/i27493437/ca1f7e13d4429939.png)
解决方法:
第一种:在watch中监听路由变化,对router进行监控,当router发生变化时,执行初始化界面方法
![](https://img.haomeiwen.com/i27493437/cb09bbd50764b2c0.png)
第二种:给router-view添加唯一key
增加一个不同:key值,这样vue就会识别这是不同的了。
![](https://img.haomeiwen.com/i27493437/0d5ccbd016c8d8e9.png)
第三种方法:使用生命周期函数 :activated
![](https://img.haomeiwen.com/i27493437/5e56e35f487bca0c.png)
网友评论