VueJs：使用 vue-router 的两个独立且独立的路由/视图

Question

目标：使用 vue-router 拥有两条独立、可独立导航的路线。

详情：

如何让页面的两个部分通过 vue 路由器独立路由？假设您有一个页面拆分为main view 和sidebar。 main view 是您通常期望的视图，您单击链接，它会更改路径并加载新组件。 sidebar 是完全独立的，无论您在main view 中的哪个位置，sidebar 都不会改变，但sidebar 也有链接，可以让您转到其内部的不同组件。

使用 vue-router，我可以命名视图，但这些似乎与当前路径/路由相关联，无法单独控制。

示例注释：

问题

vue-router 是否可以有两个独立且相互不关联的独立路由/视图？如果有，是否有相关文档，是否有路由器代码示例？

注意：这里没有代码，似乎没有必要，因为这不是代码问题，而是vue-router 用例问题。

Answer 1

如果你使用2个Vue apps，每个都有自己的router，你可以实现单独的独立路由。

fiddle 中的一个小演示。

我使用了 2 条路线，一条带有 history 模式，另一条带有 abstract。

我看到的最大问题是，至少开箱即用，你不能有一个 URL 将用户指向相同的视图，因为现在你正在管理 2 个不同的路由器。

另一个与通信有关，您现在有 2 个不同的 Vue 应用程序实例，因此您需要对它们之间的通信做一些事情。 但这不应该那么难

• 如果您使用的是Vuex，您可以在两者上设置相同的store 对象
• 如果您只是使用普通的 data 对象，您可以将相同的对象传递给两个实例，这将变为反应式或
• 您始终可以通过同一总线进行通信