Vue Router beforeEnter 与 beforeEach

Question

我正在尝试将未登录的用户从所有页面重定向到/login. 我尝试过，但当用户使用直接 url（如, beforeEach()）输入网站时，它不会触发。/home/event

Per-Route GuardbeforeEnter()工作得很好，因为一旦用户登陆该特定页面，它就会触发。但是，它要求我添加beforeEnter()每条路线。

我正在寻找一种方法来beforeEnter()在路由器上的几乎每个页面（甚至在动态页面上）复制该内容，未登录的用户将被重定向到/login.

当用户使用直接 url 输入时，此功能有效/home。

routes: [
  {
    path: '/home',
    name: 'home',
    beforeEnter(to, from, next){
      if ( to.name !== 'login' && !this.isloggedin ){
         next({
           path: 'login',
           replace: true
         })
      } else {
         next()
      }
    }
  },
  ...
]

此功能仅在用户进入站点并更改路线后才有效

vm.$router.beforeEach((to, from, next)=>{
  if ( to.name !== 'login' && !this.isloggedin ){
    next({
      path: 'login',
      replace: true
    })
  } else {
    next();
  }
})

提前致谢。

Answer 1

看起来这beforeEach是在初始化的组件内定义的，这意味着第一个路由已经发生。使用您的路由在路由器模块中定义它：

const router = new VueRouter({
...
})

router.beforeEach((to, from, next)=>{
  if ( to.name !== 'login' && !this.isloggedin ){
    next({
      path: 'login',
      replace: true
    })
  } else {
    next();
  }
})

希望您正在使用 Vuex 并且可以导入store.state.isloggedin. 如果还没有使用 Vuex，这说明了为什么它对于全局状态很有用。