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 相关文章推荐
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
innerText 使用示例
Jan 23 Javascript
js实现拖拽效果
Feb 12 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
基于Vue实现timepicker
Apr 25 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
javascript实现留言板功能
Feb 08 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中全局变量global的使用演示代码
2011/05/18 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
法学毕业生自我鉴定
2013/11/08 职场文书
幼儿生日活动方案
2014/08/27 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
医学生自荐信范文
2015/03/05 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书