`this` undefined in vue-router beforeEach

Question

I'm trying to access the session in vue-router viathis.a.app, but it pops out 1 error. After i debug, i found out that this is undefined. this is the code im using to show this.

I had tried to use function(to, from, next) {...} instead of es6 syntax, but this is still undefined.

router.beforeEach((to, from, next) => {
  if (!to.meta.isPublic){
    // eslint-disable-next-line
    console.log(this)
  }
  next()
})

Is there any configuration i need to make so that i can access this in vue-router?

Answer 1

Yes, you can use access "this" inside router beforeEach hook, but in a different way. The router has the root instance from where it is inserted

User router.app it is pointing to "this" (the root Vue instance)

 router.beforeEach((to, from, next) => {
  if (!to.meta.isPublic){
    // eslint-disable-next-line
    console.log(router.app)
  }
  next()
})