Router async beforeEach triggers two routes
I'm not sure but this how I guard my route in a Vue component hope this helps you
beforeRouteEnter(to, from, next) { if (store.getters.isAuthenticated) { Promise.all([ store.dispatch(FETCH_ARTICLE, to.params.slug), store.dispatch(FETCH_COMMENTS, to.params.slug) ]).then(() => { next(); }); } else { Promise.all([store.dispatch(FETCH_ARTICLE, to.params.slug)]).then(() => { next(); }); } },
Have you tried using beforeEnter?
This way you can specify which routes are going to execute your function
Like this code below:
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ]})