我正在用Vue建立一个管理页面.JS2和我想阻止未经验证的用户访问/admin路径，并将他们重定向到/login.为此，我在管理组件中使用了组件Guard beforeRouteEnter，如下所示
...
beforeRouteEnter(to, from, next) {
if(userNotLogedIn) {
this.$router.push('/login');
}
}
这里的问题是beforeRouteEnter hook中没有定义this.那么，在这种情况下，访问$router并重定向到其他url的正确方式是什么？
这documentation条规定:
beforeRouteEnter守卫无法进入this，因为
您可以通过如下方式调用next重定向到另一个页面:
beforeRouteEnter(to, from, next) {
if(userNotLogedIn) {
next('/login');
}
}
下面是实现相同结果的另一种方法:因此，您可以使用meta属性在路由配置中定义受保护的路由，而不是在每个受保护的路由上使用beforeRouteEnter，然后在所有路由上使用beforeEach钩子，判断受保护的路由，并在需要时重定向到登录页面:
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,
// ...
})