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

Posted 2023-02-23

【中文标题】如果最后一项不是 Vue 路由，如何为 router.back() 提供替代方案？

【英文标题】：How to provide an alternative for router.back() if the last item is not a Vue route?

【发布时间】：2018-07-03 16:45:55

【问题描述】：

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

这两种情况都是不需要的。如果之前的路线不是正确的 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();
);

我将如何检查在组件内虽然之前的路线是什么并相应地调整我的链接？

【参考方案1】：

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

this 变量没有引用此钩子中的 Vue 实例。但是，您可以通过传递给next 函数（本例中为vm）的回调中的第一个参数来引用 Vue 实例：

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

Here's the documentation on navigational guards.

【讨论】：

谢谢，文档中好像跳过了那个。

它不起作用，因为您无法访问beforeRouteEnter 中的this，如下所述：router.vuejs.org/en/advanced/navigation-guards.html 解决方法也描述了，您需要将回调传递给next()。

是的，你是对的！我忘记了。更新了我的答案。

为了让这个解决方案起作用，钩子应该包含在视图组件中而不是子组件中，因此路由实际上会发生变化。