我怎样才能检测到 Vue $router.back() 已完成，而不是空历史堆栈的情况？

Question

我正在使用 Vue 和 VueRouter。

我的页面上有一个后退按钮，我现在正在设置 @click 操作来执行 $router.back()。

<a class="btn-back" @click="$outer.back()"></a>

但是如果直接打开页面（没有之前的历史记录url），没有任何反应。

在这种情况下，我希望将页面替换到特定位置（例如主页）。我该怎么做？

我一直在寻找判断历史是否为空的技术。

Answer 1

最后我找到了一个棘手的方法来做到这一点。

实际上，如果历史堆栈中还有其他上一页，在我们调用$router.back()之后，路由信息应该已经更改了。

因此，在$router.back之后，我们可以检查路线并判断路线是否更改。如果路由没有改变，这意味着历史堆栈是空的，那么我们做 $router.replace() 代替。

总的来说，我写了这样一个方法：

import _ from 'lodash'

export default {
  // ...
  methods: {
    backOrRedirect (route) {
      const vm = this
      const originRoute = { ...vm.$route }
      vm.$router.back()
      // Of course, we must detect until a $nextTick is reached
      vm.$nextTick(() => {
        // If the route is not changed, we do the redirect
        if (_.isEqual(originRoute, vm.$route)) {
          // Redirect to the home path by default
          vm.$router.replace(route || '/')
        }
      })
    }
  }
  // ,,,
}

I use lodash to compare between the origin route and the newRoute object.

所以，我们可以很容易地调用vm.backOrRedirect(url)来启动一个$router.back()，当历史堆栈为空时，它肯定会回退到某个页面。

我怎样才能检测到 Vue $router.back() 已完成，而不是空历史堆栈的情况？

How can I detect a Vue $router.back() is done, rather than the case of empty history stack?

html

javascript

html5-history

vue.js

vue-router