时间戳

首页 > 解决方案 > 我可以在同一个应用程序中拥有多个 SPA，或者在同一个应用程序中使用历史记录和哈希路由吗？

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

问题描述

我正在构建一个应用程序，并希望在我网站的不同页面中有多个 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 文档中找不到任何关于此的内容。有没有人做过这样的事情？

标签： vue.jsvuejs2vue-router

解决方案

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

您本质上需要的是SSR。

使用 SSR，您的第一页（无论用户先访问哪个页面）都将由服务器预渲染。然后任何时候，用户导航到另一个页面，它不会是整页刷新。它将由您的客户端路由器处理。

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

此外，如果您的应用程序非常大并且具有不同的基于角色的视图，请考虑使用微前端。

推荐阅读