vue路由在keep-alive下的刷新问题 对watch的影响
转载自:https://www.cnblogs.com/dansingal/p/8302100.html
问题描述:
在keep-alive中的在跳转到指定的路由时刷新对应的路由,其余不刷新。
1 2 3 4 5 |
|
有几种解决方式:
1.在keep-alive中直接添加 include,cachedViews(Array类型:包含vue文件的组件name都将被缓存起来);反之exclude则是不包含;
注意:所有.vue组件文件都必须附上name属性!!!建议用vuex管理cachedViews
1 2 3 |
|
2.监测$router的变化;
1 2 3 4 |
|
但是会在页面离开时再次执行fetchDate,并不是我们需要的,所以可以在to和from上添加执行逻辑,但也是十分的麻烦
1 2 3 4 5 6 7 8 |
|
3.在添加keep-alive后会增加两个生命周期mounted>activated、离开时执行deactivated,路由的进入和切换回相应的触发activated和deactivated,这样就可以在每次入路由执行更细致的操作了
1 2 3 4 5 |
|
4.还有更简单粗暴的
1 2 3 4 5 6 |
|
5.还有种情况,在不同路由应用了相同的vue组件
1 2 |
|
默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子,需要手动的watch:$router(又回到上面的步骤),或者在router-view上加上唯一值。
1 2 3 4 5 6 7 |
|