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

Question

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

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

来自我的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()
  }
})

来自我的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
                      }
                  ]
                }
                ]
    },

  ]
})

main.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()
  }
})

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

Vue-router throwing "Cannot read property 'matched' of undefined" error only after adding global navigation guards

javascript

routing

vue.js

vue-router