vue项目keepAlive配合vuex动态怎么设置路由缓存(keepalive,vue,vuex,开发技术)

需求

首页 → 列表页→ 详情页（缓存列表页面 ） → 列表页（不重新加载列表页）→ 首页（清除列表页的缓存）

效果图

解决方案

直接使用keepAlive会出现一个问题，当从查询1进入列表页面，这时缓存list组件，然后返回首页，点击查询2，会发现list的数据是查询1的，因为这里直接调用了上一次的缓存因此，在返回首页后需清除list的缓存，下次进入list将重新初始化。

利用keepAlive进行路由缓存，keepAlive的include 和 exclude 属性允许组件有条件地缓存。

配合vuex维护一个缓存数组即可，不多BB，直接上代码

1.App.vue文件

利用include属性进行选择性缓存

<template><div><keep-alive:include="$store.state.common.cachedRouteNames"><router-view/></keep-alive></div></template>

<script>exportdefault{name:'App'};</script>

2.main.js文件

配置路由keepAlive状态

importVuefrom'vue';//importVuefrom'vue/dist/vue.esm.js'importAppfrom'../src/App.vue';importrouterfrom'../src/router/index';//import"../src/assets/style/reset.css";import'lib-flexible';importutilsfrom'./utils/utils';importstorefrom'./store/index';//配置路由keepAlive状态utils.setRouterBeforeEach(router);//runtime模式newVue({router,store,render:h=>h(App)}).$mount('#app');

3.store/modules/common.js文件

vuex管理缓存数组，编写添加和删除缓存路由方法

constUPDATE_CACHEDROUTENAMES='update_cachedroutenames';conststate={activatedReloadData:true,//页面activated时是否需要重新加载//缓存的路由列表cachedRouteNames:[]};constmutations={[UPDATE_CACHEDROUTENAMES](st,{action,route}){constmethods={add:()=>{st.cachedRouteNames.push(route);},delete:()=>{st.cachedRouteNames.splice(st.cachedRouteNames.findIndex(e=>e===route),1);}};methods[action]();}};exportdefault{namespaced:true,state,mutations};

4.utils/utils.js文件

配置路由keepAlive状态

importstorefrom'../store/index';const{cachedRouteNames}=store.state.common;constchangeRoutes=(route,type)=>{constrouteName=route.components.default.name;if(routeName&&type==='add'?!cachedRouteNames.includes(routeName):cachedRouteNames.includes(routeName)){store.commit('common/update_cachedroutenames',{action:type,route:routeName});}};//定义添加缓存组件name函数，设置的时组件的nameconstaddRoutes=(route)=>{changeRoutes(route,'add');};//定义删除缓存组件name函数，设置的是组件的nameconstdeleteRoutes=(route)=>{changeRoutes(route,'delete');};//配置路由keepAlive状态constsetRouterBeforeEach=(router)=>{router.beforeEach((to,from,next)=>{//对该组件是否读取缓存进行处理to.matched.forEach((item)=>{constroutes=item.meta.cachedRouteNames;if(item.meta.keepAlive&&(!routes||(routes&&(!from.name||routes.includes(from.name))))){addRoutes(item);}else{deleteRoutes(item);}});next();});//全局混入。在该组件被解析之后，若是属于需要缓存的组件，先将其添加到缓存配置中，进行缓存Vue.mixin({beforeRouteEnter(to,from,next){next(()=>{to.matched.forEach((item)=>{if(to.meta.keepAlive){addRoutes(item);}});});},});};exportdefault{setRouterBeforeEach};

5.store/index.js文件

importVuefrom'vue';importVuexfrom'vuex';importactionsfrom'./actions';importmutationsfrom'./mutations';importstatefrom'./state';importgettersfrom'./getters';importappfrom'./modules/app';importcommonfrom'./modules/common';Vue.use(Vuex);conststore=newVuex.Store({modules:{app,common},state,mutations,actions,getters});exportdefaultstore;

6.router/index.js文件

• keepAlive：设置缓存

• cachedRouteNames：设置缓存条件

//AnhighlightedblockimportVuefrom'vue';importVueRouterfrom'vue-router';Vue.use(VueRouter);constHome=resolve=>require(['../routers/Home.vue'],resolve);constList=resolve=>require(['../routers/list.vue'],resolve);constDetail=resolve=>require(['../routers/detail.vue'],resolve);constrouter=newVueRouter({routes:[{name:'Home',path:'/home',component:Home},{name:'List',path:'/list',component:List,meta:{keepAlive:true,//缓存条件：从List-->Detail则缓存ListcachedRouteNames:['Detail']}},{name:'Detail',path:'/detail',component:Detail}]});exportdefaultrouter;

7.routers/Home.vue文件

exportdefault{name:'Home',components:{HeaderBar},data(){return{list:['查询1','查询2']};},created(){//this.getData();//console.log(111111);},};</script>