Skip to content

$route not updated across discrete components #1102

@jhartman86

Description

@jhartman86
Contributor

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.

Activity

posva

posva commented on Jan 18, 2017

@posva
Member

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

fnlctrl commented on Jan 18, 2017

@fnlctrl
Member

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

yyx990803 commented on Jan 18, 2017

@yyx990803
Member

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

jhartman86

jhartman86 commented on Jan 18, 2017

@jhartman86
ContributorAuthor

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

yyx990803 commented on Jan 18, 2017

@yyx990803
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

yyx990803 commented on Jan 23, 2017

@yyx990803
Member

Closed by merging #1108 - thanks!

jhartman86

jhartman86 commented on Jan 23, 2017

@jhartman86
ContributorAuthor

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @yyx990803@posva@jhartman86@fnlctrl

        Issue actions

          $route not updated across discrete components · Issue #1102 · vuejs/vue-router