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

 更新时间:2020年07月26日 09:48:16   作者:linefate  
这篇文章主要介绍了vue项目使用$router.go(-1)返回时刷新原来的界面操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

问题如下:

界面1 :

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

由于使用$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

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

综上所述:

解决方法:

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

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

相关文章

  • Vue使用Canvas绘制图片、矩形、线条、文字,下载图片

    Vue使用Canvas绘制图片、矩形、线条、文字,下载图片

    这篇文章主要介绍了Vue使用Canvas绘制图片、矩形、线条、文字,下载图片的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • ArcGis API for js在vue.js中的使用示例详解

    ArcGis API for js在vue.js中的使用示例详解

    这篇文章主要为大家介绍了ArcGis API for js在vue.js中的使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 如何使用 vue-cli 创建模板项目

    如何使用 vue-cli 创建模板项目

    这篇文章主要介绍了如何使用 vue-cli 创建模板项目,帮助大家更好的理解和学习vue框架的知识,感兴趣的朋友可以了解下
    2020-11-11
  • vue+mock.js实现前后端分离

    vue+mock.js实现前后端分离

    这篇文章主要为大家详细介绍了vue+mock.js实现前后端分离,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • vue轮询请求解决方案的完整实例

    vue轮询请求解决方案的完整实例

    项目开发中需要做一个轮询,所以将实现的过程记录了一下,下面这篇文章主要给大家介绍了关于vue轮询解决方案的相关资料,需要的朋友可以参考下
    2021-07-07
  • vue3原始值响应方案及响应丢失问题解读

    vue3原始值响应方案及响应丢失问题解读

    这篇文章主要介绍了vue3原始值响应方案及响应丢失问题解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • element-ui中样式覆盖问题的方法总结

    element-ui中样式覆盖问题的方法总结

    我们在使用element-ui的时候经常会遇到需要修改组件默认样式,下面这篇文章主要给大家介绍了关于element-ui中样式覆盖问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue在IIS服务器部署后路由无法跳转

    vue在IIS服务器部署后路由无法跳转

    在IIS服务器上部署Vue项目时,可能会遇到路由无法正常跳转的问题,解决方法有两种,下面就来具体介绍一下解决方法,感兴趣的可以了解一下
    2024-10-10
  • Vue实现移动端左右滑动效果的方法

    Vue实现移动端左右滑动效果的方法

    最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,经过一番折腾,最终决定四月vue-touch。下面小编把实现代码分享给大家,感兴趣的朋友一起看看吧
    2018-11-11
  • vue中实时监听div元素盒子的宽高方法

    vue中实时监听div元素盒子的宽高方法

    这篇文章主要给大家介绍了关于vue中如何实时监听div元素盒子的宽高的相关资料,在Vue中你可以使用Vue的计算属性和侦听器来动态监测元素的高度,文中给出了简单代码示例,需要的朋友可以参考下
    2023-09-09

最新评论