Vue 路由器 beforeEnter 与 beforeEach答案

【问题标题】：Vue Router beforeEnter vs beforeEachVue 路由器 beforeEnter 与 beforeEach
【发布时间】：2020-12-08 14:25:05
【问题描述】：

我正在尝试将未登录用户从所有页面重定向到/login。我试过beforeEach()，但当用户使用/home、/event等直接网址进入网站时它不会触发。

Per-Route Guard beforeEnter() 完美运行，因为它会在用户登陆该特定页面时触发。但是，它需要我在每条路线上添加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();
  }
})

提前致谢。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案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，这说明了为什么它对全局状态很有用。

【讨论】：