TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
应无所住,而生其心
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
16篇
微服务
41篇
Git
15篇
.NET
104篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
90篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
160篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue element 页面切换如何无刷新
679
人阅读
2023/12/21 15:39
总访问:
4428190
评论:
0
收藏:
0
手机
分类:
前端
使用keep-alive就行了 ### 如果所有页面都保持页面缓存就直接在app.vue中设置中加上keep-alive就行了 在app.vue中设置 ``` <div id="app"> <!-- 所有页面都保持页面缓存 --> <keep-alive> <router-view></router-view> </keep-alive> </div> ``` ### 如果需要根据配置来,可以先在路由配置上设置是否缓存在根据判断来 先在路由配置上设置是否缓存,isKeepAlive用来判断是否缓存 ``` { path: '/task_manage/index', name: 'task_manage', component: () => import('/@/views/task_manage/index.vue'), meta: { title: '任务管理', isLink: '', isHide: false, // isKeepAlive用来判断是否缓存 isKeepAlive: true, isAffix: false, isIframe: false, roles: ['admin', 'common'], icon: 'iconfont icon-shouye', }, }, ``` 然后在app.vue中设置是否使用keep-alive就行了 ``` <keep-alive> <router-view v-if="$route.meta.isKeepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.isKeepAlive"></router-view> ``` ### 还可以使用include与exclude等属性设置是否需要缓存 include 值为字符串或者正则表达式,匹配的组件会被缓存。 exclude 值为字符串或正则表达式,匹配的组件不会被缓存。 ### 使用keep-alive与不使用keep-alive生命周期函数介绍 **不使用keep-alive** beforeRouteEnter --> created --> mounted --> destroyed; **使用keep-alive** beforeRouteEnter --> created --> mounted --> activated --> deactivated; 再次进入缓存的页面,只会触发beforeRouteEnter -->activated --> deactivated ,created和mounted不会再执行; ### 注意缓存中起作用需要加上名称name哟 ![](https://img.tnblog.net/arcimg/notebook/1c257657b50746868d9fbb45dfba3da1.png) 而且这个需要和路由配置上的一致哦,乱写是不行的 ![](https://img.tnblog.net/arcimg/notebook/83d2ce8b761e4c34967d0d5d52c65e94.png)
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}