vue使用keep-alive缓存组件,vue多级路由keep alive问题
某视频剪辑软件项目保持活跃配合状态管理动态设置路由缓存方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
需求效果图解决方案1.App.vue文件主页. js文件3.store/modules/common.js文件4.utils/utils.js文件5.store/index.js文件6.router/index.js文件7.routers/Home.vue文件
需求
首页 列表页 详情页（缓存列表页面) 列表页（不重新加载列表页) 首页（清除列表页的缓存)
效果图
解决方案
直接使用保持活跃会出现一个问题，当从查询一进入列表页面，这时缓存目录组件，然后返回首页，点击查询2,会发现目录的数据是查询一的，因为这里直接调用了上一次的缓存因此，在返回首页后需清除目录的缓存，下次进入目录将重新初始化。
利用保持活跃进行路由缓存，保持活动的包括和排除属性允许组件有条件地缓存。
配合状态管理维护一个缓存数组即可，不多BB，直接上代码
1.App.vue文件
利用包括属性进行选择性缓存
模板
div style= height:100%；
保持活动状态：include= $ store。状态。常见。“cachedroutenames”
路由器-视图/
/保持活力
/div
/模板
脚本
导出默认值{
名称："应用程序"
};
/脚本
2.main.js文件
配置路由保持活跃状态
从“Vue”导入Vue
//从" vue/dist/vue.esm.js "导入某视频剪辑软件
导入应用程序自./src/app。vue ；
从导入路由器./src/router/index ；
//导入./src/assets/style/reset。CSS ；
导入"灵活库";
从导入实用程序./utils/utils ；
从导入存储. store/index ；
//配置路由保持活跃状态
utils.setRouterBeforeEach(路由器);
//运行时模式
新Vue({
路由器，
店，
render: h=h(App)
}).$ mount( # app )；
3.store/modules/common.js文件
状态管理管理缓存数组，编写添加和删除缓存路由方法
const UPDATE _ CACHEDROUTENAMES= UPDATE _ CACHEDROUTENAMES ；
常量状态={
activatedReloadData: true，//页面激活的时是否需要重新加载
//缓存的路由列表
cachedRouteNames: []
};
常量突变={
[UPDATE_CACHEDROUTENAMES](st，{ action，route }) {
常量方法={
add: ()={
st.cachedRouteNames.push(路线);
},
删除：()={
圣卡奇德鲁泰纳斯。拼接(圣cachedroutenames。查找索引(e=e===路线)，1)；
}
};
方法[操作]();
}
};
导出默认值{
命名空间：对，
状态，
突变
};
4.utils/utils.js文件
配置路由保持活跃状态
导入商店自./store/index ；
const { cachedRouteNames }=store。状态。常见；
const changeRoutes=(route，type)={
常量路线名称=路线。组件。默认。姓名；
if (routeName type===add ？cachedroutenames。包括(路由名):cachedroutenames。包括(路线名称)){
商店。提交( common/update _ cachedroutenames ，{
动作：类型，
路线：routeName
});
}
};
//定义添加缓存组件名字函数，设置的时组件的名字
const addRoutes=(route)={
changeRoutes(route， add )；
};
//定义删除缓存组件名字函数，设置的是组件的名字
const deleteRoutes=(route)={
更改路线(路由，删除);
};
//配置路由保持活跃状态
const setRouterBeforeEach=(路由器)={
router.beforeEach(收件人，发件人，下一个)={
//对该组件是否读取缓存进行处理
to.matched.forEach((item)={
常量路线=项目。meta。cachedroutenames
if (item.meta.keepAlive(！路线(路线(!从。名称 路线。包括(来自。姓名)))))){
添加路由(项目);
}否则{
删除路由(项目);
}
});
next()；
});
//全局混入。在该组件被解析之后，若是属于需要缓存的组件，先将其添加到缓存配置中，进行缓存
Vue.mixin({
beforeRouteEnter(收件人，发件人，下一个){
下一个(()={
to.matched.forEach((item)={
if (to.meta.keepAlive) {
添加路由(项目);
}
});
});
},
});
};
导出默认值{
setRouterBeforeEach
};
5.store/index.js文件
从“Vue”导入Vue
从" Vuex "导入Vuex
从导入操作./actions ；
从导入突变。/突变；
从导入状态./州；
从导入吸气剂./getters ；
从导入应用程序。/模块/应用程序；
从导入公用./模块/公共；
vue。使用(Vuex)；
const store=new Vuex .商店({
模块：{应用程序，常用}，
状态，
突变，
行动，
吸气剂
});
导出默认存储；
6.router/index.js文件
保持活动状态：设置缓存cachedRouteNames:设置缓存条件//突出显示的块
从“Vue”导入Vue
从" vue路由器"导入武鲁特
vue。使用(vue路由器)；
const Home=resolve=require([./routers/Home.vue]，resolve)；
const List=resolve=require([./routers/list.vue]，resolve)；
const Detail=resolve=require([./routers/detail.vue]，resolve)；
const router=new VueRouter({
路线：[
{
姓名：家，
路径："/home "，
组件：主页
},
{
名称：列表，
路径："/list "，
组件：列表，
元：{
保持活动状态：真的，
//缓存条件：从列表-详细信息则缓存目录
cachedRouteNames: [Detail]
}
},
{
名称：详细信息，
路径："/详细"，
组件：详细信息
}
]
});
导出默认路由器；
7.routers/Home.vue文件
导出默认值{
姓名：家，
组件：{
横梁
},
data() {
返回{
列表：[
查询1,
查询2
]
};
},
已创建(){
//这个。get data()；
//控制台。日志(111111)；
},
};
/脚本
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。