`this` undefined in vue-router beforeEach

user_11287460 0
Viewed 1759

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?

vue-router vue.js
2 Answers

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

My best solution is to use Vue's nextTick

<script> // ignore this tag, it's just for hightlight
      router.beforeEach((to, from, next) => {
        // console.info('TO', to, 'FROM', from)
         Vue.nextTick(() => {
           if (newTerm !== oldTerm) {
             router.app.getEasy(newTerm)
           }
         })

         next()
      })
</script>
user_5301970
Related