Vue-router: beforeEach doesn't trigger on full page reload

[rightaway]

[yyx990803]

Cannot reproduce, please provide a reproduction.

[LinusBorg]

Still can't reproduce, works for me: http://jsfiddle.net/Linusborg/mnqnwcfr/

[LinusBorg]

Closing this as In can't reproduce this and OP didn't provide a reproduction.

We will re-visit the issue if a reproduction can be provided.

[lepture]

@yyx990803 @LinusBorg

Look at the code that @rightaway provided.

router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  return next();
});

The above code is located below the mount of Vue app. If we move the beforeEach code above of the app.$mount, it would print beforeEach message.

[fnlctrl]

@lepture That's expected behavior. Since you registered beforeEach after $mount-ing vue, when vue $mounts, the router doesn't have a beforeEach hook yet, so it won't be called on initial load.

[lepture]

@fnlctrl I was explaining how to reproduce @rightaway bug to @yyx990803 and @LinusBorg.

[Erigers]

the exact same thing is happening to me. This is what I do:

beforeRouteEnter (to, from, next) {
      console.log('in beforerouteenter');
      profileService.getProfile((response) => {
        store.state.tempProfile = response.data;
        console.log('got data');
        console.log(store.state.tempProfile);
        return next();
      });
    },

It prints all console.logs but still redirects me on my home page. This happens when I reload the page, but not when I navigate in-app.

I am following this page on router docs: https://router.vuejs.org/en/advanced/data-fetching.html

This line:

 next(vm => vm.setData(err, post))

is throwing an error as well,
Edit
I managed to fix the first part, there is nothing wrong with the guard 💯
Second part as well

[sunceenjoy]

You should call router.beforeEach before Vue.use(router).
https://forum.vuejs.org/t/router-beforeeach-if-manually-input-adress-in-browser-it-does-not-work/12461/3

[caomengsi]

good answers

[jitendra1607]

https://forum.vuejs.org/t/router-beforeeach-if-manually-input-adress-in-browser-it-does-not-work/12461/3

You should call router.beforeEach before Vue.use(router).
https://forum.vuejs.org/t/router-beforeeach-if-manually-input-adress-in-browser-it-does-not-work/12461/3

if Vue router is used in 'abstract' mode then router.beforeEach not getting called on page reload.

[pancerZH]

You should call router.beforeEach before Vue.use(router).
https://forum.vuejs.org/t/router-beforeeach-if-manually-input-adress-in-browser-it-does-not-work/12461/3

could not be better

[spongege]

卧槽还真的踩了这个坑。。。总算解决了