在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()

总结

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

您可能感兴趣的文章:

vue实现全选、反选功能
这篇文章主要为大家详细介绍了vue实现全选、反选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
vue 组件中slot插口的具体用法
这篇文章主要介绍了vue 中slot 的具体用法,包括子组件父组件的代码介绍，需要的朋友可以参考下
2018-04-04
vue插件v-touch的坑及解决(不能上下滑动)
这篇文章主要介绍了vue插件v-touch的坑及解决(不能上下滑动)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
探索Vue中组合式API和选项式API的用法与比较
Vue3为我们开发提供了两种组件逻辑实现方式：选项式API和组合式API,本文将尝试为大家分析什么是选项式API和组合式API,以及两种API的优缺点,希望对大家有所帮助
2023-12-12
Vue 实现接口进度条示例详解
这篇文章主要介绍了Vue实现接口进度条功能，在请求数据的过程中，需要添加监听函数来监测数据请求的过程变化，并更新组件相应的属性和界面元素,本文结合实例代码详细讲解，需要的朋友可以参考下
2023-04-04
Vue使用echarts绘制柱状图和折线图
这篇文章主要为大家学习介绍了Vue如何使用echarts绘制柱状图和折线图,文中有详细的示例代码,感兴趣的小伙伴可以跟随小编一起学习一下
2023-08-08
VUE3基于vite封装条形码和二维码组件的详细过程
基础组件开发是项目业务开发的基石, 本文主要介绍了通过vue3的vite脚手架快速搭建项目, 开发条形码和二维码组件的过程,感兴趣的朋友跟随小编一起看看吧
2023-08-08
vue.js使用v-if实现显示与隐藏功能示例
这篇文章主要介绍了vue.js使用v-if实现显示与隐藏功能,结合简单实例形式分析了使用v-if进行判断实现元素的显示与隐藏功能,需要的朋友可以参考下
2018-07-07
vue.js如何将echarts封装为组件一键使用详解
Echarts 、 Remodal和Pikaday是我们在开发后台管理类网站时常用的三个第三方组件，下面这篇文章主要给大家介绍了关于vue.js如何将echarts封装为组件一键使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
2017-10-10
ElementUI如何修改el-cascader的默认样式
ElementUI 是一套ui组件库，目前最新版本 react 和 vue 等主流框架都有支持。该库默认主题色是天蓝色，若用于项目开发，难免遇到要需求修改其默认样式的情况，这篇文章主要介绍了ElementUI如何修改el-cascader的默认样式,需要的朋友可以参考下
2023-12-12