vue通过keep-alive实现前进刷新,后退不刷新
(1)在App.vue中设置
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件,比如 page1,page2 -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件,比如 page3 -->
</router-view>
(2)在路由中设置两个参数,关于keepAlive、isRefresh的具体作用往下看
{
path: "/a",
name: "a",
component: () => import("../views/a.vue"),
meta: {
title: "前进刷新,后退不刷新测试",
keepAlive: true, //作用:控制组件是否需要缓存(true:需要、false:不需要)
isRefresh: true //作用:用于控制该组件是否执行刷新(true:需要、false:不需要)
}
},
(3)在a组件页面代码如下
export default {
//组件刚开始时加载时执行,缓存后不执行,isFirstEnter的作用是防止a页面跳往b页面的时候
//b页面被用户手动刷新,导致a页面的缓存失效,为了重新获取数据,引入该变量
created() {
this.isFirstEnter = true;
},
//keep-alive 对应两个生命周期,activated(重新切换成活跃状态)、deactivated
activated() {
// 如果 isRefresh 或 isFirstEnter 是true,表明需要获取新数据,否则就不再请求,直接使用缓存的数据
if (this.$route.meta.isRefresh || this.isFirstEnter) {
this.init();
}
// 恢复成默认的true,避免isRefresh一直是false,导致下次无法获取数据
this.$route.meta.isRefresh = true;
// 设置成false,防止每次都刷新
this.isFirstEnter = false;
},
//路由钩子函数,执行顺序 beforeRouteEnter->created->activated
beforeRouteEnter(to, from, next) {
// 如果是从二级页面回来,则不刷新
if (from.name === "order-sub") {
to.meta.isRefresh = false;
}
next();
}
};