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

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

1.vue–router中增加m ate.keepAli ve和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,
        }
    },

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

<template&gt;
    <router-view v-slot="{ Component, route }"&gt;
        <keep-alive :include="include"&gt;
            <component :is="Component" v-if="route.meta.keepAlive" /&gt;
        </keep-alive&gt;
        <component :is="Component" v-if="!route.meta.keepAlive" /&gt;
    </router-view&gt;
</template&gt;

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

export default {
    setup() {
        const router = useRouter();
        //	用于记录实际缓存页面名称
        const data = reactive({
            include: []
        });
        
        router.afterEach((to, from) =&gt; {
        	//	把要缓存的页面加入缓存列表
            //	如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
            if (to.meta.keepAlive) {
                !data.include.includes(to.name) &amp;&amp; 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) }
    }
}

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

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

5.遇到的问题

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

原文地址:https://blog.csdn.net/jugtba/article/details/134552783

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_2139.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。