vue中beforeRouteLeave实现页面回退不刷新的示例代码
作者:develop_ 时间:2024-05-09 15:11:16
路由切换返回前一个路由时实现页面不刷新功能,首先想到的是keep-alive,但是页面不属于父子级关系,所以决定用beforeRouteLeave,下面贴代码
beforeRouteLeave(to, from, next){
if(to.name !== 'page2'){
//判断是从哪个路由过来的,如果不是page2过来的需要做什么操作在这里实现
//如果是page2过来的,表明当前页面不需要刷新获取新数据,直接用之前缓存的数据即可
}
next();
}
beforeRouteLeave后面的参数to是关于上个页面的信息,to.name就是上个路由名称。
这里有的人beforeRouteLeave方法无法触发可能是因为在page2页面中路由跳转写了router.go(-1) ,这里必须写具体跳转的路由名称
this.$router.push({name:'xxx'});
PS:
最近才做了一个功能一个路由下面有两个tab切换的页面,互相切换的时候需要保持之前选的参数,其实tab本身是有这个功能的,但是这个需求切换的时候是需要像后台发送请求,并且路由改变再切回来参数是要初始化的,所以想到了用beforerouteleave
beforerouteleave之前是一直听闻这个东西并没有用过,再网上看了,按照他们的用法并没有效果
然后就自己试了一下结果成功了
看我的目录结构
下面的migrationPeople和personalMigration分别是tab切换里面的两个内容
index里面是写tab切换的
我们只需要把beforeRouteLeave想写vue生命周期一样的写法写进来就好了,至于参数to,from是什么就给路由守卫是一样的,感兴趣的可以自己打印看一下
beforeRouteLeave(to,from,next){
if(sessionStorage.getItem('migrationPeopleDate')){
sessionStorage.removeItem('migrationPeopleDate')
}
if(sessionStorage.getItem('personalMigrationMan')){
sessionStorage.removeItem('personalMigrationMan')
}
next()
},
来源:https://segmentfault.com/a/1190000020871962
标签:vue,beforeRouteLeave,不刷新
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
sqlserver2005 TSql新功能学习总结(数据类型篇)
2024-01-28 10:46:07
python3模拟实现xshell远程执行linux命令的方法
2022-05-26 11:45:14
![](https://img.aspxhome.com/file/2023/0/118390_0s.jpg)
Python 功能和特点(新手必学)
2022-02-23 04:11:25
编写Python的web框架中的Model的教程
2022-09-29 22:54:19
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2022-03-22 08:00:31
python 中xpath爬虫实例详解
2021-06-08 08:51:46
![](https://img.aspxhome.com/file/2023/3/109353_0s.png)
Python中如何导入类示例详解
2023-05-09 08:35:58
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2024-01-13 16:32:46
![](https://img.aspxhome.com/file/2023/1/64861_0s.png)
python结合shell自动创建kafka的连接器实战教程
2023-01-06 19:17:13
详解用 python-docx 创建浮动图片
2021-07-16 13:32:12
![](https://img.aspxhome.com/file/2023/3/124923_0s.png)
mysql 截取指定的两个字符串之间的内容
2024-01-17 21:19:54
Oracle数据库的实例/表空间/用户/表之间关系简单讲解
2023-07-20 11:48:34
![](https://img.aspxhome.com/file/2023/4/64474_0s.jpg)
Pygame游戏开发之太空射击实战精灵的使用上篇
2023-06-25 01:04:17
![](https://img.aspxhome.com/file/2023/6/66346_0s.png)
客户端模板的应用
2007-05-11 16:50:00
Python文件操作类操作实例详解
2023-05-19 04:45:08
Python求算数平方根和约数的方法汇总
2021-12-08 18:03:39
解决python3中os.popen()出错的问题
2022-07-20 23:38:48
![](https://img.aspxhome.com/file/2023/3/115853_0s.png)
Python+Pygame实现神庙逃亡游戏
2022-06-12 16:26:28
![](https://img.aspxhome.com/file/2023/6/79506_0s.jpg)
在阿里云的CentOS环境中安装配置MySQL的教程
2024-01-13 13:13:26
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2022-08-09 08:38:29
![](https://img.aspxhome.com/file/2023/3/101103_0s.png)