仅在添加全局导航保护后，Vue路由器才会引发“无法读取未定义的属性'匹配'”错误

Question

After finally figuring out logging in and the first step of user-role-based routing, I've moved on to putting in place some authentication guards on various URLs.

It seemed simple enough, but I've run into an error and can't seem to find an example with a similar use case. Everyone else I've seen who has this error seems to have misnamed their router instance as something other than "router". I have not, as far as I can tell. I'm using the vue-cli template with webpack, fyi.

From my 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()
  }
})

From my main.js:

import router from './router'

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

Any clues as to what is causing this error?

Update: I went back through and removed things until it worked again-- it turns out that changing my previous export default new Router syntax to be const router = new Router (along with changing plain "Router" to be VueRouter, to match examples, just in case) is actually what is causing this error. Still not sure why that would happen though.

Answer 1

Realized that I just needed to move my navigation guard into the main.js file, not have it in the index.js with the router.

So the corrected files look like:

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