VueJs: Two Independant & Seperate Routes/Views with vue-router

2
votes

The Goal: Have two separate, independently navigateable routes with vue-router.

Details:

How can I have two parts of a page that are independently routed with vue router? Say you have a page split into a main view and a sidebar. The main view is what you would normally expect from a view, you click on links and it changes the path and loads a new component. The sidebar is completely separate, no matter where you are in the main view the sidebar does not change, but the sidebar also has links that let you go to different components within itself.

With vue-router, I can have named views, but these seem to be tied to whatever the current path/route is, and cannot be controlled separately.

Example Annotation:

enter image description here

Question

Can vue-router have two separate, and independent routes/views that are not tied to each other? If so, is there documentation on this, are there router code examples?

Note: There is no code here, it doesn't seem necessary as this isn't a code issue, it's a vue-router use-case issue.

1
vue.jsvue-router

1 Answers

1
votes

You can achieve separate independent routes if you use 2 Vue apps each with its own router.

A small demo in this fiddle.

I've used 2 routes, one with history mode and one abstract.

The biggest problem I see with this is that, at least out of the box, you cannot have a URL that points the user to the same view(s), as now you are managing 2 different routers.

The other is related to communication, you now have 2 different Vue app instances so you need to do something about communication between them. But this shouldn't be that hard

  • if you are using Vuex you can set the same store object on both of them
  • If you are just using a plain data object you can pass the same object to both instances and that will become reactive or
  • you can always communicate over the same bus