Would be nice to have possibility of using multiple vue-route instances on same page

[NobodyDies]

What problem does this feature solve?

I think it's quite logical - if you give us a class that potentially can have multiple instances to try set more than one instance on a page, even in different vue app instances. That can be made only for adstract mode.

jsfiddle

This issue was caused by attempt to make custom-element component that have it's own routing (an abstract one) from a ready vuejs app, wich have quite alot of logic.
And any page of an app can have multiple instances of it.

With that feature implemented it could be possible to make really modular pages that don't know what components they have inside, and components itself can be very complex. And it's the behavior that i think people are expecting - if you can have multiple Vue applications on a page, why only one router?

What does the proposed API look like?

i dont think that api should change, but it can be possible to set some uid to tell vue-router instance wich router-view tag to use with it. Something like

new VueRouter({
  mode: 'abstract',
  uid: 'first-app'
})

and in template

 <router-view data-uid='first-app'></router-view>

[posva]

It already works, you just have a typo in your jsfiddle: https://jsfiddle.net/vzunncz4/
You were injecting router2 but it has to be named router 🙂

[max-nextcloud]

I tried to do the same but sadly your jsfiddle, does not exist anymore @posva . The old one also uses generic urls for the script tags so they now pull vue3 and vue-router4. So I changed them to use vue2 and vue-router3 as they originally did.

I also fixed the injection but now the two apps are completely independent of each other - i.e. routes don't sync even when using history mode: https://jsfiddle.net/dx0t72mw/