vue项目使用$router.go(-1)返回时刷新原来的界面操作


Posted in Javascript onJuly 26, 2020

在项目需求中,我们常常需要使用$router.go(-1)返回之前的页面,但是却发现,之前的界面,保持着上次跳转的状态,比如说:弹框未关闭之类的等等,。。。。。

问题如下:

界面1 :

vue项目使用$router.go(-1)返回时刷新原来的界面操作

界面2使用$router.go(-1)返回上一次的界面

vue项目使用$router.go(-1)返回时刷新原来的界面操作

由于使用$router.go(-1)返回,导致之前的数据都保留,并未刷新原来的界面,如下:还是显示跳转前的弹框

vue项目使用$router.go(-1)返回时刷新原来的界面操作

解决方法1:

不要使用$router.go(-1),而是使用$router.push('某某某'),但是其实这种方法是不合理的,因为你可能跳转的页面是很多页面都可能跳转的,所以如果直接使用$router.push('某某某'),虽然可以解决当前跳转不刷新的问题,但是会导致点击其他页面跳转到页面2,点击使用$router.push('某某某'),所谓的返回按钮,是永远跳转到界面1,不符合现实需求,所以,不推荐使用该方法

解决方法2:

在界面1的watch中,对router进行监控,当router发生变化时,初始化界面;

根据本项目进行案例演示:

代码如下:

界面一弹出框,使用的是使用pop来控制,显示的时候是pop = true,不显示的是pop = false

vue项目使用$router.go(-1)返回时刷新原来的界面操作

之所以使用$router.go(-1)时弹框未关闭是因为pop还是true,所以使用如下方法解决,当router变化的时候初始化数据pop

vue项目使用$router.go(-1)返回时刷新原来的界面操作

综上所述:

解决方法:

watch: { '$route' () { // 此处写router变化时,想要初始化或者是执行的方法...... } },

以上这篇vue项目使用$router.go(-1)返回时刷新原来的界面操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 覆盖和重载 函数
Sep 25 Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
详解vue 图片上传功能
Apr 30 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
JS实现京东商品分类侧边栏
Dec 11 Javascript
用React Native制作一个简单的游戏引擎
May 27 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 #Javascript
vuex分模块后,实现获取state的值
Jul 26 #Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 #Javascript
全面解析JavaScript Module模式
Jul 24 #Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 #Javascript
在Vuex中Mutations修改状态操作
Jul 24 #Javascript
Vue自动构建发布脚本的方法示例
Jul 24 #Javascript
You might like
也谈截取首页新闻 - 范例
2006/10/09 PHP
一段php加密解密的代码
2007/07/16 PHP
PHP n个不重复的随机数生成代码
2009/06/23 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
详解Angular 自定义结构指令
2017/06/21 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
基于Python List的赋值方法
2018/06/23 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
Python创建自己的加密货币的示例
2021/03/01 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
工厂保安员岗位职责
2014/01/31 职场文书
2014年督导工作总结
2014/11/19 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
婚宴新郎致辞
2015/07/28 职场文书
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫