keep-alive实现tab标签页缓存

标签页缓存
实现效果: 已经打开的tab页签,再次访问不重新加载;关闭tab页签后再次访问,则重新加载
实现技术: keep-alive组件的include属性指定页面缓存
 
一、修改主框架页面Main.vue
1、
代码:
<keep-alive  :include="cachPage">
   <router-view></router-view>
</keep-alive>
 
2、
代码:
cachPage () {
   return this.$store.state.app.cachPage
},
 
二、修改app.js
1、
 
2、
3、
 
 
三、修改mid.vue(多级菜单)
 
代码:
<keep-alive :include="cachPage">
   <router-view ></router-view>
</keep-alive> 
 
computed:{
   cachPage(){
       return this.$store.state.app.cachPage
   },
}
 
四、修改mian.js
代码:
function handleKeepAlive (to) {
    if (to.matched && to.matched.length > 2) {
        for (let i = 0; i < to.matched.length; i++) {
        const element = to.matched[i]
        if (element.components.default.name === 'secMenu') {
            to.matched.splice(i, 1)
            handleKeepAlive(to)
        }
        }
    }
}
 
// 全局混入,关闭tab时清除组件缓存
Vue.mixin({
    beforeRouteEnter:function(to, from, next){
        handleKeepAlive(to)
    },
});
 
五、需要缓存的页面加上组件name (备注:这个name要和放入缓存数组的名字一致)
 
 
六、为了以后新开发的页面支持缓存,需要修改newDIYCode这个目录下的所有模板
 
以“parentlist.ejs”这个模板为例:
(因为模板里面获取不到菜单编码,所以用了功能编码,因此以后配置菜单编码要和功能编码一致)
 

 

七、遇到的问题
问题描述1:A/B 页面都做缓存 ,在B页面点击弹出框 切换到A页面弹出框不会关闭,但是路由切换了,这怎么解决 ?
解决办法:全屏弹出框需要增加:transfer=“false”这个配置
 
八、实现iframe页面缓存

 参考文献:https://www.cnblogs.com/workJiang/p/15006659.html

1main.vue页面新增

 

2、新增2个变量

 

3、新增1个方法

 

4、新增1个方法

 

5mian.vue里面新增3个方法

 

6mian.vue里面init新增缓存iframe的方法

 

7util.js修改initRouter方法

 

8、修改app.js里面的更新路由方法

 

9

 

10

 

 

 

posted on 2023-10-17 10:09  转角遇到谁  阅读(413)  评论(0编辑  收藏  举报