Solve the problem that the page uses the keepAlive cache function, and then return to the page after jumping to achieve refresh
Requirements analysis: page A uses the keepAlive: true cache function, and page A uses router.push for path jumping. After page A jumps to page B and returns to page A again, the page needs to be refreshed
Step on the pit:
- Calling the page refresh function after router.push realizes jumping to page B in page A is invalid
- Changing keepAlive in page A to false is invalid
- It is effective to delete keepAlive in page A, and the result is that the tab bar is missing (does not meet the requirements)
Implementation idea: observe whether the page path changes, and trigger the page refresh function if there is a change
Specific implementation method: monitor route changes
Method 1: Use watch to monitor routing changes
watch:{
$route(to,from){
// 输出当前所在页面的路径
console.log(to.path);
// 若路径为你需要刷新的页面路径
if(to.path === '你需要刷新的页面路径'){
console.log('页面进行刷新了');
// 则调用刷新页面的函数进行刷新
this.reload();
}
}
};
Method 2: Use the hook function in vue-router to monitor routing changes
// 监听,当路由发生变化时执行 需知道以下这些函数什么时候被调用
beforeRouteEnter (to, from, next) {
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但在该组件被复用时会调用
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
}