首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue路由使用this.$router.go(-1)返回两次

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

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

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