如何检测 Vue $router.back() 是不是已完成，而不是历史堆栈为空的情况？

Posted 2023-02-22

【中文标题】如何检测 Vue $router.back() 是不是已完成，而不是历史堆栈为空的情况？

【英文标题】：How can I detect a Vue $router.back() is done, rather than the case of empty history stack?如何检测 Vue $router.back() 是否已完成，而不是历史堆栈为空的情况？

【发布时间】：2020-03-06 04:35:51

【问题描述】：

我正在使用 Vue 和 VueRouter。

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

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

但是如果页面是直接打开的（没有以前的历史 url），什么都没有发生。

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

我一直在寻找技术来判断历史是否是空的，没有运气。

【参考方案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 || '/')
        
      )
    
  
  // ,,,

我使用 lodash 来比较原始路由和 newRoute 对象。

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