CODEWITHSUNDEEP
vue.jsvue-router
Tan Vee Han
Tan Vee Han

Reputation: 337

`this` undefined in vue-router beforeEach

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?

Upvotes: 5

Views: 2551

Answers (2)

insign
insign

Reputation: 5803

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>

Upvotes: 0

chans
chans

Reputation: 5260

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

Upvotes: 3

Related Questions