没有合适的资源?快使用搜索试试~ 我知道了~
前言 最近蒸煮在做一个独立项目的时候遇到了一个小坑,特此做个爬坑纪念。 基本情景是页面之间通过vue路由跳转,从页面A跳转到页面B(在页面B进行对应操作后),再从页面B跳转到页面C。之后再从页面C返回到页面B,页面B保留之前状态,返回页面A,页面B状态不保留。(。・∀・)ノ゙嗨~感觉说的好乱。 总之就是,前进刷新,后退不刷新(刷新是指是否重新渲染) 相信很多小伙伴都会想到用keep-alive开启缓存页面来实现,鹅,蒸煮也没例外,下面就是蒸煮的爬坑过程。 vue路由开启keep-alive缓存页面 keep-alive是vue官方提供的一种缓存组件实例的方法。 第一步,先改写<router-v
资源详情
资源评论
资源推荐
vue路由中前进后退的一些事儿路由中前进后退的一些事儿
前言前言
最近蒸煮在做一个独立项目的时候遇到了一个小坑,特此做个爬坑纪念。
基本情景是页面之间通过vue路由跳转,从页面A跳转到页面B(在页面B进行对应操作后),再从页面B跳转到页面C。之后再
从页面C返回到页面B,页面B保留之前状态,返回页面A,页面B状态不保留。(。・∀・)ノ゙嗨~感觉说的好乱。
总之就是,前进刷新,后退不刷新(刷新是指是否重新渲染)
相信很多小伙伴都会想到用keep-alive开启缓存页面来实现,鹅,蒸煮也没例外,下面就是蒸煮的爬坑过程。
vue路由开启路由开启keep-alive缓存页面缓存页面
keep-alive是vue官方提供的一种缓存组件实例的方法。
第一步,先改写<router-view>的展示方式
<keep-alive>
//这是会被缓存的页面
<router-view v-if="$route.meta.keepAlive">
</router-view></keep-alive>
<router-view v-if = "!$route.meta.keepAlive">
//这里是不被缓存的组件
</router-view>
第二步,在路由配置文件里,配置组件是否被缓存
routes:[
{ path: '/',
name: 'Index',
component: Index,
meta:{
title:"博物馆",
keepAlive:false//不缓存
}
},
{
path:'/searchMain',
name:'SearchMain',
component:SearchMain,
meta:{
title:"搜索",
keepAlive:true,//缓存
}
},
{
path:'/collectionDetails',
name:'CollectionDetails',
component:CollectionDetails,
meta:{
title:"藏品详情",
keepAlive:false,//不缓存
}
}]
这样的话无论什么时候,缓存的组件一直会被缓存
第三步,根据路由钩子来改变缓存组件的状态
beforeRouteLeave(to, from, next) {
if(to.path="首页"){
from.meta.keepAlive =false;
}else if(to.path="详情页"){
from.meta.keepAlive = true;
} // 跳转到 首页时,不缓存,跳转到详情页时缓存(就是不刷新)
next();
}
这种行吗?行吗?行吗?不行!!因为第一次的时候确实会成功,可是退出去以后就gg了,
因为keepAlive已经变成了false,第二次就不会缓存。那么第一个页面加下面代码,让他进入的时候
beforeRouteLeave(to, from, next) {
if(to.path=="/searchMain"){
to.meta.keepAlive =true;
weixin_38742532
- 粉丝: 41
- 资源: 909
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- xyctf:从入门到精通的实用指南.zip
- mmqrcode1714153659780.png
- Screenshot_2024-04-27-06-08-58-486_com.baidu.xin.aiqicha.jpg
- 基于Javaweb+Tomcat+MySQL的大学生公寓管理系统+sql文件.zip
- 实训作业基于javaweb的订单管理系统源码+数据库+实训报告.zip
- 多机调度问题贪心算法基于最小堆和贪心算法求解多机调度问题.zip
- 基于同态加密技术的匿名电子投票系统源码.zip
- Pyqt5项目框架-PyQt项目开发实践
- 基于C通过MQTT的智能农业大棚管理系统(本科毕业设计)
- python+CNN的网络入侵检测算法源码.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0