Vue-router: afterEach is never run when redirecting with next()

Created on 11 Jan 2018  路  2Comments  路  Source: vuejs/vue-router

Version

3.0.1

Reproduction link

https://codepen.io/anon/pen/ypjMNx

Steps to reproduce

  1. Click on the router link "go to other route".

What is expected?

  1. beforeEach hook should be called and "before: /other-route" should be logged to console
  2. user should be redirected to '/'
  3. afterEach hook should be called and "after: /other-route" should be logged to console

What is actually happening?

  1. beforeEach hook is being called and "before: /other-route" is logged to console
  2. user gets redirected to '/'

This only happens if the user gets redirected to the page he is coming from (e.g.: user coming from '/' and going to '/other-route', but gets immediately redirected to '/').

Most helpful comment

@posva and what if i have something like that in beforeEach:
loadingTimeout = setTimeout( () => app.loading = true, routerConfig.latencyThreshold, );

and when app.loading === true i show loading indicator and on afterEach im cleaning timeout and setting loading to false. Because of not calling afterEach my indicator stucks...
If beforeEach is being called then afterEach should be too, its not afterRouteEnter or something like this... its EACH

Thanks

edit:
i made workaround in my particular case, but i have to make multiple checks if given route is string or object if have name or path and is the same as from, i was hoping vue-router will do it for me.
additionally i cant use beforeRouteEnter to avoid this "bug"

All 2 comments

Thanks for the clear repro. Because you stay on the same route, no navigation happens (as if you called next(false)) so afterEach is not called either

@posva and what if i have something like that in beforeEach:
loadingTimeout = setTimeout( () => app.loading = true, routerConfig.latencyThreshold, );

and when app.loading === true i show loading indicator and on afterEach im cleaning timeout and setting loading to false. Because of not calling afterEach my indicator stucks...
If beforeEach is being called then afterEach should be too, its not afterRouteEnter or something like this... its EACH

Thanks

edit:
i made workaround in my particular case, but i have to make multiple checks if given route is string or object if have name or path and is the same as from, i was hoping vue-router will do it for me.
additionally i cant use beforeRouteEnter to avoid this "bug"

Was this page helpful?
0 / 5 - 0 ratings