beforeRouteEnter not calling next callback and beforeRouteUpdate not called when using the same component on two routes

[coxy]

Version

3.0.1

Reproduction link

https://codesandbox.io/s/qqoy3zox0j

Steps to reproduce

Click on each of the links in order in the example and also check the console.

What is expected?

I would expect the beforeRouteUpdate to be called after each page transition as all the routes share the same component.

What is actually happening?

Firstly, the route transition from Page 2 to Nested Page 1 calls the beforeRouteEnter hook, but doesn't execute the next callback (hence why count doesn't update). Secondly, the route transition from Nested Page 1 to Nested Page 2 doesn't call either the beforeRouteEnter or the beforeRouteUpdate hooks.

[bryanpackman]

@coxy When downgrading to Vue 2.4.4 in your sandbox, and keeping vue-router at v3.0.1, it seems to work as expected

[coxy]

Thanks @bryanpackman - I tried a few other versions and can confirm it works as expected all the way up to vue 2.5.15 (see https://codesandbox.io/s/1yyz9m1ll) so looks like the issue only applies to vue 2.5.16 + vue-router 3.0.1. If I get some time I'll try to debug what's causing the issue

[bryanpackman]

Same for me. On the application I’m working on, I was also able to get beforeRouteUpdate to work by downgrading to 2.5.15

[titpetric]

Also confirming. Just in case some "newbies" are around, the way you downgrade is by issuing:

npm install [email protected]
npm install [email protected]

I tried tracking down the relevant commits in upstream (from here), but I'm a bit out of my depth as to what could be the cause of the issue.

[nemtsov]

FYI: [email protected] fixes this issue for us.
vuejs/vue@v2.5.16...v2.5.17-beta.0

[nirazul]

Just for the sake of completeness: This bug has already been reported a while ago: #2082

[coxy]

@nirazul thanks. It looks similar but not identical - though the cause of the issue may be the same. Specifically, this example also highlights an issue with the beforeRouteUpdate hook not being called, not just the next callback in the beforeRouteEnter as with #2082

[nirazul]

@coxy You're right, that's probably a related but separate bug

[posva]

As a workaround, you can set a key attribute on the router-view to make Vue not reuse the component

[maksnester]

Setting :key could be painful because of this issue or this as the root of the problem vuejs/vue-loader#1332

I tried to update vue and vue-loader up to mentioned beta v2.5.17-beta.0, but I still have troubles with that callback being called.

Sorry for not providing the fiddle (maybe later), but I will describe scenario:

1. I have setup where few routes may have the same component (and they are passing some data down by using meta for that)
2. Root router-view is under keep-alive
3. How to catch next callback not being called:
   • go on route with SomeSharedComponent, let's call this route R1
   • go to any other route with another component. SomeSharedComponent will be deactivated
   • then go to some new R2 route with the same SomeSharedComponent - beforeRouteEnter is called, but callback passed to next function won't be called.

[smesterheide]

Can confirm that 2.5.17-beta.0 fixes the problem. For me 2.5.2 and 2.5.16 were affected, other versions notwithstanding.

[kawauso]

Seems to be not fixed on 2.5.17.

[hecktarzuli]

I'm having the same problem. beforeRouteUpdate stops working when using the same comp in 2 routes. https://codepen.io/hecktarzuli/pen/PBybaW?editors=1011

Version	Result
Vue 2.5.15	Good
Vue 2.5.16	Bad
Vue 2.5.17-beta.0	Good
Vue 2.5.17	Bad

Vue-Router: 3.0.1

[hecktarzuli]

@posva I can't find any documentation on :key for router-view. Where can I find out more on what it does so I can figure out the best solution? (key isn't listed in the api docs.. https://router.vuejs.org/api/#router-view-props)

[posva]

it's vue's api

[hecktarzuli]

Right, but for for-loops so.. (shrug). I tried using it with $route.fullPath and bad things happened in my app so it looks like I'm reverting to 2.5.15 :P

[ValterJunior]

Yeah, this approach of using a key in the router-view doesn't really work well. Especially if you are spreadly using those guards in other components.

[halostatue]

Just looking at the diff between v2.5.15..v2.5.16, the fix for vuejs/vue#7805 looks like it might contain the regression here, which itself is a regression fix at vuejs/vue@984927a (this is the only code in that diff that seems to refer to hooks, and there’s a pretty substantial change in hook assignment there).

As v2.5.17-beta.0 seems to have worked and v2.5.17 doesn’t, here’s the diff that exists for that change: https://github.com/vuejs/vue/compare/v2.5.17-beta.0..v2.5.17

It looks like v2.5.17-beta.0 reverted the fix for vuejs/vue#7805 and the final brought it back in (
https://github.com/vuejs/vue/compare/v2.5.17-beta.0..v2.5.17#diff-4d479bb000ed54582de8e4cd8318ef64). There’s one other change that looks interesting (
https://github.com/vuejs/vue/compare/v2.5.17-beta.0..v2.5.17#diff-37f4deddf9f54795e5be4c5540ceb90)6, but my gut feeling just based on the changes that I can read is that the problem is in src/core/vdom/create-component.js.

This behaviour is deeply problematic for the project I’m working on, but I will temporarily work around it by locking to 2.5.15 and hope that one of the bugs fixed since 2.5.15 doesn’t affect us.

[ValterJunior]

Workaround

In my case, the problem is that I have a component which calls its own route when it needs to set a new parameter to the URL. And then it has to fetch the data with the new parameter value once the route is set.
In order to have this working, I had to change my parameter route to a query parameter instead. e.g.:

before: /path/to/route/param1
after: /path/to/route?q=param1

With this approach, I was able to have the beforeRouteUpdate event to be triggered even though it is essentially the same route.

[mstrofbass]

Is this fixed in 2.5.21? I can't tell which of the 5.2 million similar bugs mine specifically falls under, but I verified that downgrading to 2.5.15 fixed my issue, then it remained fixed after upgrading to 2.5.21.

[jorngeorg]

Remains fixed for me in 2.5.21 as well!

[coxy]

Yes, can confirm this issue is fixed with 2.5.21. I'm going to close this now but feel free to re-open if the problem comes back

[jorngeorg]

Actually, in my case this issue persists.

I have a set of views that use the keep-alive feature in vue-router.
At first load of these views the next()function in beforeRouteEnter is executed. But next()is not executed when returning to a kept-alive view.

[coxy]

@jorngeorg maybe it's best to log a new issue for that as it's a little more specific (I'm also not 100% sure what the expected behaviour here should be when used in combination with keep-alive). I can confirm that the original issue I posted here is fixed with 2.5.21.

[ElSamhaa]

Same old issue, beforeRouteUpdate not executed when reusing component between multiple nested routes.

"vue": "^2.6.11",
"vue-router": "^3.2.0"

[cookiejest]

next(vm=> is not firing at all :(

"vue": "^2.6.11",
"vue-router": "^3.2.0",

Seems to be a pretty important issue :o

[jokerol]

vue 3.2.11, vue-router 4.0.12 ( + ionic/vue 5.8.0, ionic/vue-router 5.8.0 )
still not working.

[stephdz]

The same here with vue 3.2.23 and vue-router 4.0.12. Callback passed to next is never called.
It's quite annoying we can't rely on beforeRouteEnter to do some checks and setup component properly.
As a workaround, we do the checks in beforeRouteEnter and on beforeMount we do initialization but that leads to some tasks done multiple times...

[songxunzhao]

Same problem with vue 3.2.1 and vue-router 4.0.0.
Next callback is never called.