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之解决IE下不渲染的bug
Jun 29 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
CCPry JS类库 代码
2009/10/30 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
python 安装impala包步骤
2020/03/28 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
通信工程专业女生个人求职信
2013/09/21 职场文书
行政助理岗位职责
2013/11/10 职场文书
图书室管理制度
2014/01/19 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
建筑管理专业求职信
2014/07/28 职场文书
自我查摆剖析材料
2014/10/11 职场文书
关于环保的广播稿
2015/12/17 职场文书
python如何获取网络数据
2021/04/11 Python
python 进阶学习之python装饰器小结
2021/09/04 Python
MySQL 服务和数据库管理
2021/11/11 MySQL
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python