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

Posted 2023-02-23

【中文标题】VueJs：使用 vue-router 的两个独立且独立的路由/视图

【英文标题】：VueJs: Two Independant & Seperate Routes/Views with vue-router

【发布时间】：2019-07-24 14:57:47

【问题描述】：

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

详情：

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

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

示例注释：

问题

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

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

【参考方案1】：

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

fiddle 中的一个小演示。

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

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

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

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

【讨论】：

我在考虑这个，但是两个 vue 应用可以共享一个 vuex 状态吗？

他们应该，您将商店对象传递给 vue 应用程序，以便他们应该能够共享。我说应该是因为我从未实际测试过这个。我确实在 2 个不同的应用程序上使用了相同的数据对象，一切正常。

@Radu Diță，好建议，现在我可以使用第二个 vue 应用程序为案例“在主端口搜索 -> 在模式端口中编辑”构建自己的模式，但我有一个问题：如果我的脚本尝试维护 2 个 vue 应用的路由状态，如何获取这 2 个 vue 应用的引用（我需要获取 'this.$root' 来跟踪某些东西）？