Vue-router: this.app won't work inside beforeEnter

[sahibalejandro]

Inside a beforeEnter per-route guard the Router instance is this.a instead of this.

Example:

new VueRouter({
    routes: [
        {
            beforeEnter: (to, from, next) => {
                this.app // app is undefined
                this.a.app // this works!
            }
        }
    ]
})

It's normal?

[fnlctrl]

You're using arrow functions that doesn't have access to the desired this, please use normal functions instead:

beforeEnter(to, from, next) {
    this.app
}

[sahibalejandro]

Oh crap! 😅
Thanks!

[nemani]

For me using arrow function with this.a.app works, but this.app without arrow functions, doesn't work.
:(

[Naskalin]

same problem

// [email protected]
// [email protected]
new VueRouter({
    routes: [
        {
            name: 'test', path: '/test', component: Test,
            beforeEnter: (to, from, next) => {
                console.log(this); // {a: VueRouter}
                console.log(this.a.app); // Vue
            },
            beforeEnter(to, from, next) {
                console.log(this); // undefined
            },
            // and for completeness
            beforeEnter: function (to, from, next) {
                console.log(this); // undefined
            },
        }
    ],
});

[waqas385]

I'm facing same problem,

please find the repro (https://jsfiddle.net/waqas385/pvqz8s6u/)

Is there any thing I am doing wrong? As per my understanding next() callback should have the (this)

[kiddick]

@Naskalin I am getting undefined by every case..