vue-element-admin 中多层导航 keep-alive 失效问题
vue-element-admin
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
项目地址:https://gitcode.com/gh_mirrors/vu/vue-element-admin
·
需求是: 在一个三级导航中 列表页面 缓存数据,比如看到了第三页, 再次返回来时数据不要刷新, 详情页面需要每次进入就刷新获取数据。
在使用 vue-element-admin 开发时, 多层导航 keep-alive 会失效, 在github上找到的解决方案是把二级父导航直接注册在 store 文件夹下 tagsView.js 里面的 cachedViews 中, 如下:
const cachedRoutes = ['XXXXX'] // 此处为需要缓存的二级导航的名字
const state = {
visitedViews: [],
cachedViews: cachedRoutes
}
注意: 路由的名字必须和 vue 文件里面的 name 值一样
但是这样的话只要共用了 父导航的 所有子页面 都会缓存, 导致详情页面只要打开一次,之后在进入的话,里面的数据就不会改变, 就算关闭了重新打开也是如此。
最后使用钩子 activated, 重新调用方法解决。关于 activated 的官方描述为: 被 keep-alive 缓存的组件激活时调用 [传送门]。
虽然完成了功能,但是感觉很不灵活, 暂时就先这样吧,后期有时间了再来处理。
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:2 个月前 )
0caa975e - 3 年前
cd3f7267 - 3 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐

所有评论(0)