其他分享
首页 > 其他分享> > vue keepAlive+include动态缓存

vue keepAlive+include动态缓存

作者:互联网

首先,做这个目的是产品多次提出页面缓存的问题,导致客户抱怨,一直没有解决,那能怎么办,只能我上了

网上找了很多方案,发现通过条件控制include的值是最好的方案,而不是之前的判断meta里面的值

使用include的方案也差不多是通过传参去判断,但是不怎么优雅,相对于新项目可以这样,但是老项目就是大改造

 

本项目是基于左侧菜单选择,然后右侧展示内容去设计

实现方案

  1.路由配置,获取路由列表

  2.监听路由变化,获取当前页面的路由名称进行保存或销毁

  3.页面name属性声明,声明即缓存

 

1.路由配置

  1.首先配置路由列表

import Router from "vue-router";
import Vue from "vue";
import layout from '@/views/layout/layout'

Vue.use(Router);
const routersList = [
    {
        path: '/',
        component: (resolve) => require(["@/views/layout/index"], resolve),
        children: [{
            path: 'A',
            component: layout,
            children: [
                {
                    path: '',
                    name: 'A1',  //标注了name的页面为待缓存列表
                    component: () => import('@/views/layout/test1.vue'),
                },
                {
                    path: 'A1_child', //A1_child的子列表为内部跳转页面,也可抽出跟A1同级(路径名称随意)
                    component: layout,
                    children: [
                        {
                            path: 'A2',
                            name: 'A2',
                            component: () => import('@/views/layout/test2.vue'),
                        },
                        {
                            path: 'A2_child',
                            component: layout,
                            children: [{
                                path: 'A3',
                                name: 'A3',
                                component: () => import('@/views/layout/test3.vue'),
                            },]
                        },
                    ]
                },
            ]
        },{
            path: 'B',
            component: layout,
            children: [
                {
                    path: '',
                    name: 'B1',
                    component: () => import('@/views/layout/test4.vue'),
                },
                {
                    path: 'B1_child',
                    component: layout,
                    children: [
                        {
                            path: 'B2',
                            name: 'B2',
                            component: () => import('@/views/layout/test5.vue'),
                        },
                        {
                            path: 'B2_A2',
                            name: 'B2_A2',
                            component: () => import('@/views/layout/test2.vue'),
                        },
                    ]
                },
            ]
        }]
    }
];
export {routersList}

以上是配置的两套路由

  1.A1->A2->A3  A1跳转A2跳转A3  

     A3->A2->A1  A3返回,A2缓存;A2返回,A1缓存

  2.B1->B2->B2_A2  B1跳转B2跳转B2_A2

     B2_A2->B2->B1  B2_A2返回,B2缓存;B2返回,B1缓存

  这样很清楚知道缓存的东西(原谅我不会画图)

  定义

    name:标注了name的页面为待缓存列表,只有这些页面才会被缓存

    A1_child:列表为内部跳转页面,相当于子列表,也可抽出跟A1同级

 

 

  2.layout组件,用于每层页面缓存

<template>
    <keep-alive :include="include">
        <router-view></router-view>
    </keep-alive>
</template>

<script>
    export default {
        computed:{
            include(){
                return this.$store.state.include
            },
        },
    }
</script>

2.监听路由变化,获取当前页面的路由名称进行保存或销毁

  App.vue页面

<template>
  <div id="app">
    <keep-alive :include="include">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
  import CacheClass from '@/assets/js/config/CacheClass'
  export default {
    computed:{
      include(){
        return this.$store.state.include
      },
    },
    watch: {
      $route(to,from) {
        console.log('路由变化',this.$route)
        this.cache.queryModule(to,from)
      },
    },
    mounted() {this.cache=new CacheClass({instance:this})
    }
  }
</script>
CacheClass.js
import {routersList} from '@/router'
class CacheClass {
    constructor(params={}) {
        this.routersList=routersList //路由列表
        this.instance=params.instance  //vue实例
        this.cacheList=[] //模块缓存列表
        this.includeList=[]
        this.init()
    }
    init(){
        this.getCacheList()
    }
    getCacheList(){
        const fn=(list,obj)=>{
            for(let i in list){
                if(list[i].children&&list[i].children.length){
                    fn(list[i].children,obj)
                }else{
                    if(list[i].name){
                        if(!obj.module) obj.module=list[i].name
                        obj.children.push(list[i].name)
                    }
                }
            }
        }
        const tmp=[]
        for(let i in this.routersList){
            tmp.push({
                module:'',
                children:[]
            })
            fn(this.routersList[i].children,tmp[tmp.length-1])
        }
        this.cacheList=tmp
    }
    queryModule(to,from){
        if(!to.name) return
        // console.log(to,from)
        // console.log(this.cacheModule,'当前模块')
        let cacheList=this.cacheList
        //查出当前路由所在的列表
        let cacheName=''
        let list=[],otherList=[] //其他列表
        cacheList.map(item=>{
            if(item.module!==this.cacheModule) {
                otherList.push(item)
            }else{
                list=list.concat(item.children)
            }
        })
        // console.log('不存在列表',otherList)
        // console.log('列表',list)
        const reset=()=>{
            otherList.map(item=>{
                if(item.children.includes(to.name)){
                    cacheName=item.module
                }
            })
            this.cacheModule=cacheName
            if(cacheName){
                console.log('设置模块')
                this.includeList=[to.name]
                this.setInclude()
            }else{
                console.log('清空模块')
                this.includeList=[]
                this.setInclude()
            }
        }
        this.includeList=JSON.parse(JSON.stringify(this.instance.$store.state.include)) //获取缓存列表
        if(list.length) {
            if(list.includes(to.name)){
                console.log('包含模块')
                if(!this.includeList.includes(to.name)){  //第一次会记录模块(页面都加进去,只要组件不加name就不生效)
                    console.log('添加',to.name)
                    this.includeList.push(to.name)
                    this.setInclude()
                }else if(this.includeList.includes(from.name)){ //模块返回检查清空
                    console.log('移除',from.name)
                    const index=this.includeList.findIndex(item=>item===from.name)
                    if(index>-1) {
                        this.includeList.splice(index,1)
                        this.setInclude()
                    }
                }
            }else{
                console.log('不包含模块,其他模块查找1')
                reset()
            }
        }else{
            console.log('不包含模块,其他模块查找2')
            reset()
        }
        console.log('当前路由值',this.includeList)
    }
    setInclude(){
        this.instance.$store.commit('setInclude',this.includeList)
    }
}

export default CacheClass

 

 setInclude(state, e){
    state.include=e
  }

 

3.页面name属性声明,声明即缓存

name:'layoutIndex'

 

 include缓存是通过页面name去缓存的,所以声明后就相当于缓存

 

 

PS

  1.不管跳转的页面要不要缓存,都需要填写name,加入待缓存列表

  2.B2页面要跳到B2_A2(即A2页面),那么B2_A2必须加入到B1_child的子列表,否则不生效

   所以路由跳转以name的形式跳转 this.$router.push({name:'B2_A2'})

  3.一种情况就是共用A2页面,页面name有多个,都需要进行缓存,可以通过组件形式引入,再分别设置name

 

标签:缓存,layout,name,vue,页面,A2,B2,include,keepAlive
来源: https://www.cnblogs.com/dongzhi1111/p/16306630.html