Vue JS - 查找路由器历史记录 -1答案

【问题标题】：Vue JS - Find the router history -1Vue JS - 查找路由器历史记录 -1
【发布时间】：2021-06-22 20:14:19
【问题描述】：

用 Vue2 可以看到在哪里...

this.$router.go(-1)

会带你去吗？

我们有一个用例可以将用户重定向到他们登录后的最后一页，除非那是忘记密码的页面。在这种情况下，我们希望将它们发送回主页。

最好的方法是什么？

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

Vue 2 和 Vue 路由器 3

您可以使用beforeRouteEnter 导航守卫来跟踪之前的路线（存储在from）：

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm._backRoute = from.path
    })
  },
  methods: {
    goBack() {
      if (this._backRoute === '/reset-password') {
        this.$router.push({ name: 'Home' })
      } else {
        this.$router.go(-1)
      }
    }
  }
}

demo 1

Vue 3 和 Vue 路由器 4

您可以阅读window.history.state.back 以提前了解返回状态：

export default {
  methods: {
    goBack() {
      if (window.history.state.back === '/reset-password') {
        this.$router.push({ name: 'Home' })
      } else {
        this.$router.go(-1)
      }
    }
  }
}

demo 2

【讨论】：

我很欣赏这个，但应该提到我们正在使用 Vue2 看起来这发生在路由器的 createWebHistory 中。使用 window.history.state.back 我只是变得不确定。
@Travis 使用 Vue 2 和 Vue Router 3，使用 beforeRouteEnter 跟踪之前的路由。查看更新的答案。