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

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