vue.js - 我可以在同一个应用程序中拥有多个 SPA 或在同一个应用程序中使用历史记录和哈希路由吗？

Question

我正在构建一个应用程序并希望在我网站的不同页面中有多个 Vue 实例!

有没有办法在同一个应用程序中使用历史路由和“哈希”路由，这样我就可以拥有这样的 URL。

www.mysite.com/blog/seo-friendly-content
www.mysite.com/blog/google-can-see-this
www.mysite.com/#/something-cool/state-preserved
www.mysite.com/#/cool-but-not-indexed

我的应用程序的一部分需要提供对 SEO 友好的内容，而另一部分有很多动态内容。我不想强制用户发出另一个服务器请求以在应用程序的“SPA”部分加载完全不同的页面!

我想我可以为我手动创建的静态 HTML 页面提供服务，但我希望尽可能使用 Vue 路由器来处理路由!

我在 Vue.js 文档中找不到任何关于此的内容。有没有人做过这样的事情？

Answer 1

如果你有多个根 Vue 实例，那么你不能有一个单一的路由器实例。从根本上讲，您的应用程序需要在服务器级别进行路由拆分。这意味着您的客户端-服务器路由器不能单独解决这个问题。

您本质上需要的是 SSR .

使用 SSR，您的第一个页面(以用户首先访问的页面为准)将由服务器预呈现。然后任何时候，用户导航到另一个页面，都不会刷新整个页面。它将由您的客户端路由器处理。

现在是 2018 年，我强烈建议您使用 HTML5 路由，而不是基于哈希的路由。

另外，考虑使用 micro-frontends如果您的应用程序非常大并且具有不同的基于角色的 View 。