Vue-loader: vue-router subroutes has bug with vue-hot-module-replacement

[GilbertSun]

demo: https://github.com/GilbertSun/vue-debug-demo

repeat:
1.

npm install && npm run dev

1. open browser navigate http://localhost:8080
2. change ./src/index.vue

<template>
    <div>
        <header>i am header</header>
        <main>
            <router-view></router-view>
        </main>
    </div>
</template>

to

<template>
    <div>
        <header>i am header change</header>
        <main>
            <router-view></router-view>
        </main>
    </div>
</template>

it will apply hot module replacement

i got the result

dom structure is

it looks like hmr inject the whole app into a sub router-view

ps: i'm not sure this is a vue-loader bug, but in the https://github.com/vuejs/vue-router/tree/dev/example/advanced this bug didn't appear, so i think this bug may the difference version in vue-loader or vue-hot-reload-api

[GilbertSun]

i init this project with vue init webpack-simple

[mrzzcn]

same problem

[antoniputra]

I have similar problem.
I start with vue init webpack and set up the nested routes.

the only problem is when I made change on parent route. always duplicating content component every times changes happen.

[gbdematos]

+1 Also with this problem... It's cascading the Parent into the Parent's router-view. :(

Edit: I'm using browserify + hmr

[vagusX]

+1 same problem
but when I locked vue loader version ~8.3.1, it seems everything working fine

[rjoo]

Also having this problem. Downgrading vue-loader to 8.3.1 didn't do it for me. Which version of vue-hot-reload-api are you using?

[vagusX]

@rjoo vue-hot-reload-api's version is 1.3.2, but I found in another project this problem still existed
@yyx990803 can you solve it?

[zheeeng]

Same Problem. Searching for some solutions.

[zheeeng]

@antoniputra Sorry for mentioning you in an old issue, have you solved this problem?

[antoniputra]

@zheeeng not yet :(
I don't have any idea how to solve it.

because this is in development environment, I just skip, and continue my development.

[zheeeng]

@antoniputra I also have to skip this problem and perform the page refreshing manually.

[xierenyuan]

• -。 +1

[franciscolourenco]

+1 pain

[cycold]

+1
In the https://github.com/vuejs/vue-router/tree/dev/example/advanced is normal, but I found the console output:

[HMR] Vue component hot reload shim applied.
[HMR] vue-router <router-view> hot reload shim applied.

When this bug present, the console only print

[HMR] Vue component hot reload shim applied.

seems <router-view> hot reload shim applied not applied.

[skyrpex]

I can reproduce the problem in the following situation:

<!-- HMR won't work -->
<router-link :to="{ name: 'home' }">
    <span>Home!</span>
</router-link>

<!-- HMR works -->
<router-link :to="{ name: 'home' }">
    Home!
</router-link>

Looks like having child nodes in the default slot prevents HMR from working. I think that the rendering with h(...) (as seen here) doesn't work.

I'm using:

• "vue": "^2.0.0-rc.4",
• "vue-loader": "^9.4.2",
• "vue-router": "^2.0.0-rc.4",

[laander]

+1 :'-(

[LinusBorg]

This is also tracked on the vue-router repo here: https://github.com/vuejs/vue-router/issues/662

[boogerlad]

Same bug but broader scope. Seems to affect all components? https://github.com/vuejs/vue-loader/issues/370

*related, not same.

*referring to @skyrpex 's comment

[LinusBorg]

Does not seem like the same problem. I'm #370 you say nothing abiut duplicattion if replaced modules, you talk about changes not being applied at all.

[vanhoavn]

+1

[notflip]

+1 Still in 2017

[LinusBorg]

This comment will likely be ignored as it was:

• done on a closed issue
• Without providing a reproduction of the issue that you claim still exists.