如果最后一项不是 Vue 路由，如何为 router.back() 提供替代方案

Question

我正在将router.back()与vue-router一起使用。它可以工作，但我可以预见的问题是用户可能会通过直接访问来访问没有历史记录的页面。该用户或用户来自另一个域。

这两种情况都是不需要的。如果之前的路由不是正确的 Vue 路由，我想提供一个替代方案。

所以在这种情况下，我想推送类似 this.$router.push({ name: 'deal-list' }); 而不是router.back()

我知道可以用route.beforeEach检查路由，并且我已经将它与我的router.js文件一起使用，以维护我的查询参数，如下所示：

router.beforeEach((to, from, next) => {
    if (!hasQueryParams(to) && hasQueryParams(from)) {
        next({ name: to.name, query: from.query });
    }
    next();
});

如何在组件中检查以前的路由是什么并相应地调整我的链接？

Answer 1

使用 vue router，你可以直接在组件上设置一个beforeRouteEnter钩子，获取对上一个路由的引用。

this 变量在此钩子中不引用 Vue 实例。但是，你可以通过传递给 next 函数的回调中的第一个参数来引用 Vue 实例(在本例中vm(：

data() {
  return {
    previousRoute: null,
  }
},
beforeRouteEnter(to, from, next) {
  next(vm => vm.previousRoute = from);
}

以下是有关导航防护的文档。