Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

$route not updated across discrete components #1102

Closed
jhartman86 opened this issue Jan 18, 2017 · 7 comments
Closed

$route not updated across discrete components #1102

jhartman86 opened this issue Jan 18, 2017 · 7 comments
Labels
2.x improvement

Comments

@jhartman86
Copy link
Contributor

jhartman86 commented Jan 18, 2017 •
edited
Loading

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.
@posva
Copy link
Member

posva commented 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
Copy link
Member

fnlctrl commented 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
Copy link
Member

Yeah, if a router is injected more than once there should be a warning. The proper usage is creating multiple router instances.

@jhartman86
Copy link
Contributor Author

jhartman86 commented Jan 18, 2017 •
edited
Loading

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
Copy link
Member

@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
Copy link
Member

Closed by merging #1108 - thanks!

@jhartman86
Copy link
Contributor Author

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!

@matthew-white matthew-white mentioned this issue Aug 19, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
2.x improvement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@yyx990803 @posva @jhartman86 @fnlctrl