VUE 解决单页使用keep-alive页面返回不刷新的问题
情景:A、B、C 三个页面 , A是首页 B是列表页 C是详情页
A每次进入B页面B每次都要刷新,
C每次返回B页面B都不刷新还在原来的位置
下面代码配置
1.app.vue <keep-alive>是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: "/funGoodsArea", name: "funGoodsArea", component: () => import("../views/activity/funGoodsArea.vue"), meta: { title: "text", keepAlive: true } },
3.在B的页面配置 beforeRouterLeave ,其中funGoodsArea的路由
//修改列表页的meta值,false时再次进入页面会重新请求数据。 beforeRouteLeave (to, from, next) { from.meta.keepAlive = false; next(); },
4.同样在C页面中配置
// 返回上一页路由不刷新问题
beforeRouteLeave (to, from, next) { if (to.path == "/funGoodsArea") { to.meta.keepAlive = true; } else { to.meta.keepAlive = false; } next(); },
其中 beforeRouterLeave(to,from,next){}和methods平级的