javascript - 我怎样才能检测到 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()，它肯定会回退到重定向到某个页面历史堆栈为空。