vue---keepAlive页面刷新问题
需求:a页面进入b页面时,b页面要刷新c页面返回b页面时,b页面不刷新1.app.vue是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><!-- 除了需要
·
需求:
a页面进入b页面时,b页面要刷新
c页面返回b页面时,b页面不刷新
1.app.vue
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 除了需要缓存的路由 还要创建一个非缓存路由的入口-->
<router-view v-if="!$route.meta.keepAlive"></router-view>
2.配置路由的地方配置全局keep-alive
{
path: "/b",
name: "pageB",
component: () => import("b.vue"),
meta: {
keepAlive: true
}
},
3.在B的页面配置 beforeRouterLeave
//修改列表页的meta值,false时再次进入页面会重新请求数据。
beforeRouteLeave (to, from, next) {
from.meta.keepAlive = false;
next();
},
4.在c页面配置
// 返回上一页路由不刷新问题
beforeRouteLeave (to, from, next) {
if (to.path == "/b") {
to.meta.keepAlive = true;
} else {
to.meta.keepAlive = false;
}
next();
},
更多推荐
已为社区贡献3条内容
所有评论(0)