如何在路由器挂钩之前重定向到vue-router内的不同URL？

Question

我正在使用Vue.js 2构建管理页面，我希望阻止未经身份验证的用户访问/admin路由并将其重定向到/login。为此，我在Admin组件中使用了In-Component Guard beforeRouteEnter，如下所示

...
beforeRouteEnter(to, from, next) {
  if(userNotLogedIn) {
    this.$router.push('/login');
  }
}

这里的问题是this钩子中没有定义beforeRouteEnter。那么在这种情况下，访问$router并重定向到其他网址的正确方法是什么？

Answer 1

documentation表示：

  

beforeRouteEnter后卫无法访问this，因为。{1}}   在导航确认之前调用后卫，因此是新的   尚未创建输入组件。

您可以像这样调用next重定向到另一个页面：

beforeRouteEnter(to, from, next) {
  if(userNotLogedIn) {
    next('/login');
  }
}

以下是实现相同结果的另一种方法：因此，您可以使用beforeRouteEnter属性在路由器配置中定义受保护路由，而不是在每个受保护路由上使用meta，然后使用{{1挂钩所有路由并检查受保护的路由并在需要时重定向到登录页面：

beforeEach