Vue-router: [next] beforeRouteLeave never call if same component

[stephanedemotte]

Vue.js & vue-router.js version

2 RC4, 2RC4

Reproduction Link

repro

Steps to reproduce

Click on slug 1
Click on home
beforeRouteLeave is call and log = params.slug

Click on slug 1
Click on slug 2
beforeRouteLeave is not call

What is Expected?

The route change, we have to call beforeRouteLeave ?

What is actually happening?

beforeRouteLeave Not call

[fnlctrl]

Well It's obvious: You are not leaving that route when you are only switching params.

[yyx990803]

It's the same route with different params. You can react to param changes by watching $route.

[stephanedemotte]

got it ! thanks !

[stephanedemotte]

It's the same for beforeEach and afterEach ?

[stephanedemotte]

Sorry but i don't understand why Vue-router got difference between hardcoded path and dynamique path

demo

"URL" it's just params together ?

With this logic, we cannot have "dynamic URL" from a API for example, and use Before Hook.
Maybe we have to wait before the next page is called.

It's my 2 cents. But i find it very confusing

[fnlctrl]

@stephanedemotte

Short version:

"hardcoded path" and "dynamique path"(actually it's dynamic segment) are different things. Please read the docs carefully. (Yes, 0.7 docs apply here)

Long version:

For /foo/:slug/, the slug part is called a dynamic segment, and will match /foo/1, /foo/2 etc, all of which belong to the same route /foo/:slug.

If you manually define /foo/abc, /foo/def, then

1. they are different routes.
2. abc and def will not be available through $route.params.slug as opposed to defining /foo/:slug

And please use a watcher on $route to react to url changes if that's your actual purpose, instead of using beforeRouteLeave.

[mattjneuber]

I have a small question about this. The nice thing about beforeRouteLeave is that you can prevent navigating away under certain conditions.

I have a setup that uses a subroute to render part of the page. I would like a navigation guard on the subroute to prevent switching to another one if the data is not saved.

        {
            path: '/customers/view',
            component: ViewCustomerShell,
            children: [
                {path: ':id', name: 'ViewCustomer', component: ViewCustomer}
            ]
        },

So when I visit /customers/view/12 and make a change, if they try to load /customers/view/13, I want to pop up the usual confirmation and potentially stop navigation. Since beforeRouteLeave is not called in this situation, what is the recommended approach for preventing navigation? It seems that watching $route would be too late, because then the navigation has already occurred.