首页
归档
分类
标签
更多
留言板
说说
关于
Search
1
饥荒联机版控制台代码大全
1,024 阅读
2
编译安装带 Brotli 压缩的 Nginx
930 阅读
3
Obsidian多端快速同步插件
901 阅读
4
树莓派+EC20模块实现连接蜂窝网和短信收发
887 阅读
5
EC20通过gammu接收短信再转发优化
865 阅读
软件
CSS
Python
MySql
Java
typecho自定义
Vue
学习笔记
Linux
Shell脚本
Nginx
树莓派
邮件
拍照
热点
ec20
云盘
系统烧录
好玩
饥荒
硬件
工具
笔记
随心记
登录
Search
标签搜索
树莓派
Linux
Java
CSS
饥荒
小妙招
个人热点
nextcloud
云盘
DHT11
学习笔记
树莓派拍照
Nginx
MySql
ESP
娱乐
ec20模块
文件共享
git
图床
Mango
累计撰写
51
篇文章
累计收到
7
条评论
首页
栏目
软件
CSS
Python
MySql
Java
typecho自定义
Vue
学习笔记
Linux
Shell脚本
Nginx
树莓派
邮件
拍照
热点
ec20
云盘
系统烧录
好玩
饥荒
硬件
工具
笔记
随心记
页面
归档
分类
标签
留言板
说说
关于
搜索到
1
篇与
的结果
2024-11-22
keep-alive使用记录(返回界面不刷新)
前引keep-alive是vue自带的一个内置组件,可以实现缓存包裹在其中的动态切换组件。{% link Vue,Built-in Components,https://cn.vuejs.org/api/built-in-components#keepalive %}我这里是和路由结合全局使用全局添加keep-alive在界面切换的router-view处做修改 <router-view v-slot="{ Component }"> <keep-alive :include="cachedRoutes"> <component :is="Component" :key="$route.fullPath" /> </keep-alive> </router-view>cachedRoutes:为需要缓存界面路由name,可以根据使用情况设置,我这里写到了pinia中export const settingStore = defineStore("setting", { state: () => { return { cachedRoutes: Array<string>(), // 缓存的路由名称列表 }; }, getters: { getCachedRoutes(): string[] { return this.cachedRoutes; }, }, actions: { addRouteToCache(routeName: string) { if (!this.cachedRoutes.includes(routeName)) { this.cachedRoutes.push(routeName); } }, removeRouteFromCache(routeName: string) { const index = this.cachedRoutes.indexOf(routeName); if (index !== -1) { this.cachedRoutes.splice(index, 1); } }, }, });设置路由路由定义在需要缓存的界面路由mate中添加keepAlive: true { path: "/test/pageA", name: "pageA", meta: { title: "界面A", keepAlive: true }, component: () => import( "@/views/test/pageA/index.vue" as string ), }设置路由守卫,通过路由守卫向cachedRoutes 中添加需要缓存页面nameconst setRouteCache = (event: any) => { if (event.state) { const { name, meta } = currentRoute as any; if (meta.keepAlive) settingStore().removeRouteFromCache(name); } }; // 监听浏览器后退事件 window.addEventListener("popstate", setRouteCache); router.beforeEach(async (to: any, _from: any, next) => { // 设置浏览器标题 document.title = to.meta.title; window.history.state.action = to.name; currentRoute = _from; if (to.matched) { to.matched.forEach((record: any) => { if (record.name && record.components?.default) { const component = record.components.default; if (typeof component === "function") { // 处理异步组件 component().then((resolved: any) => { if (!resolved.default.name) { resolved.default.name = record.name; } }); } else if (!component.name) { // 处理普通组件 component.name = record.name; } } }); } if (to.meta.keepAlive) { const settingSate = settingStore(); settingSate.addRouteToCache(to.name); } next(); });其中下面这部分代码是设置页面name和路由的name绑定如果一致的可以去除 if (to.matched) { to.matched.forEach((record: any) => { if (record.name && record.components?.default) { const component = record.components.default; if (typeof component === "function") { // 处理异步组件 component().then((resolved: any) => { if (!resolved.default.name) { resolved.default.name = record.name; } }); } else if (!component.name) { // 处理普通组件 component.name = record.name; } } }); }
2024年11月22日
538 阅读
0 评论
0 点赞