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 缓存的组件激活时调用 [传送门]。
虽然完成了功能,但是感觉很不灵活, 暂时就先这样吧,后期有时间了再来处理。
GitHub 加速计划 / vu / vue-element-admin
87.26 K
30.42 K
下载
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:2 个月前 )
0caa975e - 2 年前
cd3f7267 - 2 年前
更多推荐
已为社区贡献2条内容
所有评论(0)