vue3页面缓存,使用keep-alive的include不生效

问题背景

近期项目研发vue的技术栈从vue2切换至vue3,部分写法升级。项目调试时发现页面缓存 不生效,页面使用setup语法糖(<script setup>组合式api简化写法)。定位解决过程做一个记录。

定位问题

在vue2中页面缓存使用如下

js 复制代码
//router.js 定义路由时在meta中增加cachePage配置项,将需要缓存的页面name遍历导出
const routes = [
    {
            path: '/neterror',
            component: () => import('@/views/errorPage/NetError.vue'),
            name: 'NetError',
            meta: {
                    title: '网络异常',
                    cachePage:true
            }
    }
]
let cachePages = []
for(let route of routes) {
	if(route.meta.cachePage){
		cachePage0.push(route.name)
	}
}
export const cachePage = cachePages
html 复制代码
<!-- layout.vue cachePage为需要缓存的name数组 如['NetError'],从router.js import进来 -->
<keep-alive :include="cachePage">
        <router-view />
</keep-alive>

在vue3中依样画葫芦

router还是用的js,写法一样

layout.vue里写法稍稍不一样,如下。在vue3里<transition><keep-alive>不再直接包裹<router-view><keep-alive>需要通过插槽接收动态组件

html 复制代码
<!-- 页面主体 -->
<router-view v-slot="{ Component }">
        <keep-alive :include="cachePage">
                <component :is="Component" />
        </keep-alive>
</router-view>

此时检查了cachePage的打印均无错误,但是缓存不生效。当把include去掉,缓存是有效果的。因此,定位是include引起的缓存未生效,而include只是组件名的数组,在使用setup语法糖时并未设置组件的name属性,从这里入手调试解决。

解决思路

vue2只有选项式api写法,而vue3保留了这种写法,同时增加了组合式api。在选项式api写法中,我们写组件时会显性命名。

xml 复制代码
<script> 
export default{ 
    name: 'Home' // 组件名称 
} 
</script>

而在使用setup语法糖后,无法优雅的定义组件的name值。虽然vite会根据组件的文件名自动生成组件名(文件名为 index.vue 时,组件名称会自动设置为 Index),但有时不太符合预期,如home/index.vue的name期望是Home而不是Index。

为解决此问题,装了一个插件vite-plugin-vue-setup-extend,通过<script setup name="Home">这样的方式指定组件名称,当然name需要和cachePage(即router.js中定义的路由的name)一致。(项目版本 vue:3.2.37)

sh 复制代码
#安装插件依赖
npm i vite-plugin-vue-setup-extend@0.4.0 -D
js 复制代码
//vite.config.js 引入依赖
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default
 defineConfig({
  plugins: [ 
      VueSetupExtend() 
  ]
})
html 复制代码
<!--页面代码-->
<template>
···
</template>
<script setup name="Home">
···
</script>

vue3.3+版本也可在<script setup>使用defineOptions定义name

js 复制代码
<script setup> 
import { defineOptions } from 'vue'; 
defineOptions({ name: 'Home' }); 
</script>

总结

在vue3项目中,使用<keep-alive>缓存路由组件时,需要注意其写法,include属性使用时需注意组件名称的设置等。

相关推荐
AI视觉网奇5 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems1235 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
wyzqhhhh8 小时前
less和sass
前端·less·sass
Nan_Shu_6149 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel11 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
前端小白从0开始11 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible11 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫11 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评12 小时前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
CS Beginner12 小时前
【html】canvas实现一个时钟
前端·html