在vue中路由使用this.$router.go(-1)返回两次问题

更新时间：2023年12月04日 17:14:52 作者：DemoJx

这篇文章主要介绍了在vue中路由使用this.$router.go(-1)返回两次问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue路由使用this.$router.go(-1)返回两次

问题

在项目中给返回按钮添加事件，并且使用了this.$router.go(-1)，目的是为了返回上一个页面，然后点击之后钩子路由走了两次，返回到了上上个页面。

解决

若你也有遇到这种问题，请先检查你的路由配置中所有的name，看看是否存在命名出错。

同事的路由配置代码如下：

const router=new Router({
  mode:'history',
  routes: [
    {
      path:'/news/list',
      name:'new.list',
      component:NewsList
    }
})

我们可以发现他的name多了一个点，然而问题就出现在这里了。

此时我们把name修改后，再运行代码，一切正常，问题得以解决。

const router=new Router({
  mode:'history',
  routes: [
    {
      path:'/news/list',
      name:'newList',
      component:NewsList
    }
})

this.$router.go(-1)无效

问题描述

h5页面放在android的webview中运行的时候，发现this.$router.go(-1)返回失效。

解决思路

在beforeRouteEnter钩子时，使用sessionStorage存储from.path；然后在点击返回的时候使用this.$router.push

代码：

beforeRouteEnter(to, from, next) {
    next(vm => {
      window.sessionStorage.setItem('lasterRouter', from.path)
    })
  },

//返回事件时调用
this.$router.push(window.sessionStorage.getItem('lasterRouter'))

另一种方法：

直接调用浏览器的window.history.back()

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Django Vue实现动态菜单和动态权限
本文主要介绍了Django Vue实现动态菜单和动态权限，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
Vue+Element-UI中el-table动态合并单元格:span-method方法代码详解
el-table是element-ui提供的表格组件,可以用于展示和操作数据,这篇文章主要给大家介绍了关于Vue+Element-UI中el-table动态合并单元格:span-method方法的相关资料,需要的朋友可以参考下
2023-09-09
Vue中key为index和id的区别示例详解
这篇文章主要介绍了Vue中key为index和id的区别详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-06-06
VUE+elementui面包屑实现动态路由详解
今天小编就为大家分享一篇VUE+elementui面包屑实现动态路由详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue实现下拉表格组件
这篇文章主要为大家详细介绍了Vue实现下拉表格组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
详细解读VUE父子组件的使用
这篇文章主要介绍了详细解读VUE父子组件的使用,今天来讲一种子父组件深度耦合的方式，使我们不用额外的创建新的组件，也可以达到一些效果，下面与你们分享一下
2023-05-05
vxe-table 实现按回车键自动新增一行(示例代码)
本文通过示例代码介绍了vxe-table新版本中实现回车自动换行功能的方法,通过设置keyboard-config.isLastEnterAppendRow参数可以控制是否开启该功能,当回车键在最后一行按下时,会自动新增一行,并将光标移动到新行,代码简单易懂,感兴趣的朋友跟随小编一起看看吧
2024-12-12
如何根据业务封装自己的功能组件
这篇文章主要介绍了Vue封装功能组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
electron-vite新一代electron开发构建工具
这篇文章主要介绍了electron-vite新一代electron开发构建工具，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
基于vue组件实现猜数字游戏
这篇文章主要为大家详细介绍了基于vue组件实现猜数字游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11