vue.js - VueJS : Two Independant & Seperate Routes/Views with vue-router

Question

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

详细信息:

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

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

示例注释:

问题

vue-router 可以有两个相互独立的路由/ View 吗？如果是这样，是否有这方面的文档，是否有路由器代码示例？

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

Answer 1

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

fiddle 中的一个小演示.

我使用了 2 条路线，一条是 history 模式，一条是 abstract。

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

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

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