Javascript 如何在路由器挂钩之前重定向到vue路由器内的其他url？

我正在使用Vue.js 2构建一个管理员页面，我希望阻止未经身份验证的用户访问

/admin

路由，并将他们重定向到

/login

。为此，我在管理组件中使用了beforeRouteEnter之前的组件Guard，如下所示

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

这里的问题是，

此

未在

beforeRouteEnter

hook中定义。那么，在这种情况下，访问

$router

并重定向到其他url的正确方式是什么？

表示：

路由之前的

保护无法访问此
，因为
在确认导航之前调用guard，因此新的
输入组件甚至还没有创建

您可以通过如下方式调用
next
重定向到另一个页面：

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

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

let router = new Router({    
  mode: 'history',    
  routes: [    
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: {
        auth: true // A protected route
      },
    },    
    {
      path: '/login',
      name: 'Login',
      component: Login, // Unprotected route
    },
  ]
})

/* Use this hook on all the routes that need to be protected 
instead of beforeRouteEnter on each one explicitly */

router.beforeEach((to, from, next) => {    
  if (to.meta.auth && userNotLoggedIn) {
    next('/login')
  }    
  else {
    next()
  }    
})

// Your Vue instance
new Vue({
  el: '#app',
  router,
  // ...
})

使用此解决方案，您可以在用户注销后使用浏览器箭头导航并查看受保护的路由组件信息：/@nrkz一旦登录，当您想要转发用户时，您应该在历史记录中替换登录路由，而不是推送新路由。