Vue-router: 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.
https://github.com/vuejs/vue/compare/v2.5.16...v2.5.17-beta.0

[nirazul]

Just for the sake of completeness: This bug has already been reported a while ago: https://github.com/vuejs/vue-router/issues/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 https://github.com/vuejs/vue-loader/issues/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.

[sambrezo]

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