Vue-router: beforeRouteEnter next callback is not called (in this very specific async situation)

Created on 1 Mar 2018  ·  6Comments  ·  Source: vuejs/vue-router

Version

3.0.1

Reproduction link

http://jsfiddle.net/df4Lnuw6/271/

Steps to reproduce

  • Have a <router-view v-if="ready"> in the root component's template with ready initially false.
  • Have a single route for path / whose component has a beforeRouteEnter hook.
  • Perform the following in the root component's created hook:

    1. Replace the route with /?x=1 (this causes the same component to be reused).

    2. After a timeout, set ready to true.

What is expected?

The callback function passed to next in the beforeRouteEnter hook should be called.

What is actually happening?

The callback function passed to next in the beforeRouteEnter is not called.

Most helpful comment

Not sure should i create new ticket or not... Its about a component beforeRouteEnter guard

I'm using same component for different routes with different meta.content(if its important)
lets say it is _category_ and _item_

If I initially load page from _item_, callback for item works
if I initially load from _category_ - it do not works

All 6 comments

A temporary fix is to use history.replaceState directly instead of router.replace.

hmm. Since the router-view is not is _toggled off_ with a v-if, there's no component to pass to the next callback. Using a v-show would also let you have the callback.
What do you do in the actual callback that needs to be in the callback?

Since the router-view is not is toggled off with a v-if, there's no component to pass to the next callback.

The issue isn't solely the v-if, if you comment out the router.replace('/?x=1') it will work.

Since this issue requires a very specific setup, I doubt it would affect many people, so it might not be worth fixing, but I thought I'd mention it for what it's worth. Also the workaround works fine for me.

Not sure should i create new ticket or not... Its about a component beforeRouteEnter guard

I'm using same component for different routes with different meta.content(if its important)
lets say it is _category_ and _item_

If I initially load page from _item_, callback for item works
if I initially load from _category_ - it do not works

Closingn in favour of #2255 / #2188

Was this page helpful?
0 / 5 - 0 ratings