Closed
Description
Vue.js / vue-router versions
2.1.2 / 2.1.1
Reproduction Link
Steps to reproduce
- Create a router instance, and a "base" Vue instance which other components on the page will extend.
const router = new VueRouter({...});
const BaseVue = Vue.extend({ router });
- The key idea is to allow multiple, discrete Vue-controlled parts of a page without having a single parent component. So this:
<body>
<div id="my-app">
<component-a></component-a>
<component-b></component-b>
</div>
</body>
<script>
const router = new VueRouter({...});
const BaseVue = Vue.extend({ router });
new BaseVue({el:'#my-app'});
</script>
vs this:
<body>
<div class="my-app">
<component-a></component-a>
<component-b></component-b>
...
</div>
<div class="my-app">
<component-a></component-a>
<component-b></component-b>
...
</div>
</body>
<script>
const router = new VueRouter({...});
const BaseVue = Vue.extend({ router });
document.querySelectorAll('.my-app').forEach((node) => {
new BaseVue({el: node});
});
</script>
- The JSFiddle included implements the setup from the latter in the previous bullet point above. Notice that in this configuration (multiple nodes bound with
new BaseVue()s), the $route object is only updated on the second instance (in the JSFiddle, its in the node where the<router-view />is).
What is Expected?
When a route change is triggered, the $route object should be updated on all Vue instances created by new'ing BaseVue, since BaseVue was created by injecting the router option.
What is actually happening?
Only the instance where the <router-view /> lives as a child has the $route data properly updated.