Vue-router: [2.0] beforeRouteEnter's next(vm => { }) callback not always works

[fy0]

This bug this about different path with the same component.

index.vue

<template>
  <div>
    <router-link :to="{ path: '/' }">root</router-link>
    <router-link :to="{ path: '/a' }">a</router-link>
    <router-link :to="{ path: '/b' }">b</router-link>
  </div>
</template>

  beforeRouteEnter: (to, from, next) => {
    console.log(111)
    next(vm => {
      console.log(222,  vm) // <- this not always be printed
    });
  }

main.js

import Index from './index.vue'

Vue.use(VueRouter)

var routes = [
    { path: '/', component: Index },
    { path: '/a', component: Index },
    { path: '/b', component: Index },
]

var router = new VueRouter({
    routes: routes
})

Then access / and just switch between a and b, "222" never be printed.
I already tested it on a new empty project generated by vue-cli. I'll upload that if you need.

[fnlctrl]

Tested on jsfiddle, https://jsfiddle.net/fnlCtrl/a2v5rrcp/
Seems to be a bug.

[petergaal91]

Same here.

const router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '*', beforeEnter (to, from, next) {
            alert('beforeEnter'); // Appears

            next((vm) => {
                alert("next"); // Doesnt appears
            });
        }}
    ]
});

[posva]

@fy0 Why would you use the same component for different routes?

[fy0]

@posva Just like the todo-list demo, different items and url, same page.

[posva]

BTW, using a key attribute with the route path is a workaround for your problem (:key="$route.path" on the router-view element) https://jsfiddle.net/pyqchnrd/

[fy0]

@posva Cool. But It doesn't matter the way it be implemented, bug is bug.

[posva]

@fy0 that's why I didn't close it 😉

[fy0]

@posva Yeah, thx for contributors' great works.

[crabmusket]

I'm still seeing this issue using Vue 2.1.0 and Vue Router 2.1.1, but when switching between different params under the same route. I'm investigating whether it's something to do with my setup.

EDIT: I see now that param changes don't cause that function to fire anyway. Okay, I'll set up a watcher.

[dehypnosis]

Seems to still have a problem, anyone with me?

[SnooHD]

I am also having this issue. adding a key to the router-view doesn't seem to work for me.

[fy0]

@dehypnosis @SnooHD

It's a long time ago, now use beforeRouteUpdate to load new data.

And don't forget to call next(), otherwise afterEach won't be emitted.

[donghaohao]

Add a key seems work for me

[rdelgatte]

Same for me with <router-view :key="$route.path"/>

[ndethore]

Anyone else still experiencing this issue on vue-router@^3.0.1?

[ValterJunior]

Yes, I still get the same problem with vue-router@^3.0.1. Any ideas rather than forcing a key in the router-view ?

[joemsak]

yes, suggestions in comments don't work for me

[posva]

There's an open issue for this at #2255