代码之家 › 专栏 › 技术社区 › Stephan-v

如何为路由器提供替代方案。back()如果最后一项不是Vue路由?

vue-router vue-component vuejs2 vue.js

Stephan-v · 技术社区 · 7 年前

我正在使用 router.back() 使用vue路由器。这是可行的,但我可以预见的问题是,用户可能会通过直接访问来访问没有历史记录的页面。该用户来自另一个域。

这两种情况都是不需要的。如果前一条路线不是正确的Vue路线,我想提供一个替代路线。

所以在这种情况下 路由器。后退() ,我想推一下 this.$router.push({ name: 'deal-list' });

我知道路线可以查询 route.beforeEach 我已经在我的 router.js 文件来维护我的查询参数,如下所示:

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

    next();
});

我该如何检查 在组件内 虽然前面的路线是什么,但请相应地调整我的链接?

1 回复 | 直到 7 年前

thanksd thibaut noah 7 年前

使用vue路由器,您可以设置 beforeRouteEnter 直接钩住组件以获取对上一条管线的引用。

这个 this 变量不引用此挂钩中的Vue实例。但是,您可以通过传递给的回调中的第一个参数引用Vue实例 next 功能( vm 在此示例中):

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

Here's the documentation on navigational guards.

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前