-
-
Notifications
You must be signed in to change notification settings - Fork 5k
Closed
Labels
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.
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
Select code repository
Activity
posva commentedon Jan 18, 2017
I think this is simply not supported, but I don't know if it would be easy to do.
What is your use case? Are you progressively migrating an existing SPA to Vue?
@fnlctrl @yyx990803 what are your thoughts on this?
fnlctrl commentedon Jan 18, 2017
Currently a router instance can only be installed to one Vue instance, so the usage wasn't supported. Maybe we should throw an error for this?
yyx990803 commentedon Jan 18, 2017
Yeah, if a
router
is injected more than once there should be a warning. The proper usage is creating multiple router instances.jhartman86 commentedon Jan 18, 2017
Thanks for clarifying that this isn't intended to be a supported use case. @yyx990803 - when you say that creating multiple router instances is the way to achieve this, is there no concern about conflicts between the different router instances? eg. multiple instances doing things w/ the browser history api?
@posva use case is creating a library where implementers can just plug different components into any part of a page. Along the lines of: if you decorate any DOM node with the
my-app
attribute, then you can throw whatever widgets/components you want inside. Primary thing being that coordination between discrete "widgets" would be centralized with vuejs and the router.Edit: just out of curiosity, would it be a breaking change to have a single router be shared across multiple Vue instances? I'd be happy to look into it and send a PR if it would be considered.
yyx990803 commentedon Jan 18, 2017
@jhartman86 technically it should be possible to use the same router instance for multiple component trees, I don't see this bringing about a breaking change.
yyx990803 commentedon Jan 23, 2017
Closed by merging #1108 - thanks!
jhartman86 commentedon Jan 23, 2017
You guys rock. That was a pretty quick issue-filed-to-PR-accepted cycle, so thanks. Keep up the good work w/ VueJS - its a pleasure to use!