vue3 + vue-router + keep-alive缓存页面

1.vue-router中增加mate.keepAlive和deepth属性

{
        path: '/',
        name: 'home',
        component: HomeView,
        meta: {
            //	当前页面要不要缓存
            keepAlive: false,
            //	当前页面层级
            deepth: 1,
        }
    },
    {
        path: '/list',
        name: 'list',
        component: ListView,
        meta: {
            //	当前页面要不要缓存
            keepAlive: true,
            //	当前页面层级
            deepth: 2,
        }
    },
    {
        path: '/info',
        name: 'info',
        component: InfoView,
        meta: {
            //	当前页面要不要缓存
            keepAlive: false,
            //	当前页面层级
            deepth: 3,
        }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

2.App.vue页面template中增加keep-alive

<template>
    <router-view v-slot="{ Component, route }">
        <keep-alive :include="include">
            <component :is="Component" v-if="route.meta.keepAlive" />
        </keep-alive>
        <component :is="Component" v-if="!route.meta.keepAlive" />
    </router-view>
</template>
1
2
3
4
5
6
7
8

3.App.vue页面js中增加逻辑

export default {
    setup() {
        const router = useRouter();
        //	用于记录实际缓存页面名称
        const data = reactive({
            include: []
        });
        
        router.afterEach((to, from) => {
        	//	把要缓存的页面加入缓存列表
            //	如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
            if (to.meta.keepAlive) {
                !data.include.includes(to.name) && data.include.push(to.name);
            }
			
			//	解决从首页进入列表页面的时候，读取的是缓存页面，如：
			//	第一次从首页进入列表页面，读取新数据，缓存起来，然后，返回首页
			//	第二次再进入列表页面，读取的是第一次进入的缓存，不更新。
			
            // 如果 要 form(离开) 的页面是 keepAlive缓存的，
            // 再根据 deepth 来判断是前进还是后退
            // 如果是后退，就把当前页面从缓存列中删除，
            if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
                var index = data.include.indexOf(from.name);
                index !== -1 && data.include.splice(index, 1);
            }
        })
        return { ...toRefs(data) }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

4.在缓存实际页面增加name属性和路由中name设置的相同

// List.vue
export default {
	name: 'list',		//	对应路由中name:'list'的值
	components: {},
	setup(){}
}
1
2
3
4
5
6

5.遇到的问题

1.一开始直接用meta.keepAlive的值判断是否需要缓存，导致从列表进入详情，再从详情返回列表的时候是对的，再从列表返回首页，再从首页进入列表就读取缓存不更新了。
2.使用keep-alive的include属性解决1中的问题。但是明明细逻辑里已经把要缓存的name加入到缓存列表中了，就是不生效。
3.在要缓存的组件中，加入name属性解决2中的问题。