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 相关文章推荐
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
java必学必会之static关键字
Dec 03 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
javascript实现画板功能
Apr 12 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
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
CI框架表单验证实例详解
2016/11/21 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
javascript关于“时间”的一次探索
2019/07/24 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
python人民币小写转大写辅助工具
2018/06/20 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
详解python中list的使用
2019/03/15 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
Numpy的简单用法小结
2019/08/28 Python
Python requests上传文件实现步骤
2020/09/15 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
Python实现随机爬山算法
2021/01/29 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
高中生的自我评价
2014/03/04 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
经典英文广告词
2014/03/18 职场文书
建筑节能汇报材料
2014/08/22 职场文书
九一八事变演讲稿
2014/09/05 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
如何用python反转图片,视频
2021/04/24 Python