keep-alive前进调用接口,后退显示缓存 发布时间:2025/01/16 功能介绍:运用keep-alive自带的方法,结合beforeRouteEnter和beforeRouteLeave方法实现前进重新加载页面,返回调用缓存数据。 1、APP.vue <keep-alive v-if="isRouterAlive"> <router-view v-if="$route.meta.keepAlive" :key="$route.name" /> </keep-alive> <router-view v-if="!$route.meta.keepAlive" :key="$route.name" /> 复制代码 2、index.js { path: "/index", name: "index", component: () => import ("../views/index.vue"), meta: { title: "首页", keepAlive: true, true设置缓存,flase不设置 } } 复制代码 3、beforeRouteEnter和beforeRouteLeave的用法 了解to, from的用法 beforeRouteEnter(to, from, next) { to.meta.keepAlive = true; if (from.path !== "/index") { to.meta.keepAlive = true; next(); } else { from.meta.keepAlive = false; next(); } }, beforeRouteLeave(to, from, next) { if (to.path === "/index") { from.meta.keepAlive = true; next(); } else { from.meta.keepAlive = false; next(); } }, 复制代码 以上是编程学习网小编为您介绍的“keep-alive前进调用接口,后退显示缓存”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。