javascript - Vue-router 仅在添加全局导航守卫后抛出 "Cannot read property ' matched' of undefined"错误

Question

在最终弄清楚登录和基于用户 Angular 色的路由的第一步之后，我开始在各种 URL 上设置一些身份验证保护措施。

这看起来很简单，但我遇到了一个错误，似乎找不到具有类似用例的示例。我见过的其他人谁有这个错误似乎错误地将他们的路由器实例命名为“路由器”以外的东西。据我所知，我没有。我正在使用带有 webpack 的 vue-cli 模板，仅供引用。

来 self 的 index.js:

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/'
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/trucker',
      component: Trucker,
      meta: { requiresAuth: true, truckerAuth : true, dispatchAuth: false },
      children: [
                {
                  path: '/loads',
                  component: Loads
                }
            ]
    },
    {
      path: '/dispatch',
      component: Dispatch,
      meta: { requiresAuth: true, truckerAuth : false, dispatchAuth: true },
      children: [
                {
                  path: '/drivers',
                  component: Drivers
                }
                ]
    },

  ]
})

router.beforeEach((to, from, next) => {
  if(to.meta.requiresAuth) {
    const employeeId = window.localStorage.getItem('employee_id')
    if(!employeeId) {
      next('/login')
    }
    else if(to.meta.truckerAuth) {
    const employeeId = window.localStorage.getItem('employee_id')
    if(employeeId === 3) {
      next()
    }else {
      next('/login')
    }
  } else if(to.meta.dispatchAuth) {
    const employeeId = window.localStorage.getItem('employee_id')
    if(employeeId === 2) {
      next()
    }else {
      next('/login')
    }
  }
  }else {
  next()
  }
})

来 self 的 main.js:

import router from './router'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

关于导致此错误的原因的任何线索？

更新:我回过头来删除了一些东西，直到它再次工作——结果是将我以前的 export default new Router 语法更改为 const router = new Router(为了以防万一，将普通的“Router”更改为 VueRouter，以匹配示例)实际上是导致此错误的原因。仍然不确定为什么会发生这种情况。

Answer 1

意识到我只需要将我的导航守卫移动到 main.js 文件中，而不是将它放在带有路由器的 index.js 中。

所以更正后的文件看起来像:

index.js:

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/'
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/trucker',
      component: Trucker,
      meta: { requiresAuth: true, truckerAuth : true, dispatchAuth: false },
      children: [
                {
                  path: '/loads',
                  component: Loads
                }
            ]
    },
    {
      path: '/dispatch',
      component: Dispatch,
      meta: { requiresAuth: true, truckerAuth : false, dispatchAuth: true },
      children: [
                {
                  path: '/drivers',
                  component: Drivers,
                  children: [
                      {
                        path: 'calendar',
                        component: Calendar
                      }
                  ]
                }
                ]
    },

  ]
})

主要.js:

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
router.beforeEach((to, from, next) => {
  if(to.meta.requiresAuth) {
    const employeeId = window.localStorage.getItem('employee_id')
    if(employeeId == null) {
      next('/login')
    }
    else if(to.meta.truckerAuth) {
    const employeeId = window.localStorage.getItem('employee_id')
    console.log(employeeId)
    if(employeeId === 3) {
      next('/trucker')
    }else {
      next('/')
      console.log(employeeId)
    }
  } else if(to.meta.dispatchAuth) {
    const employeeId = window.localStorage.getItem('employee_id')
    if(employeeId === 2) {
      next()
    }else {
      next('/')
    }
  }
  }else {
  next()
  }
})