时间戳

首页 > 解决方案 > 如何在 Svelte spa 路由器中删除“#”？

web - 如何在 Svelte spa 路由器中删除“#”？

问题描述

我将 svelte-spa-router npm 模块用于我的 svelte 项目的路由器。使用此模块时，默认在 URL 中添加“#”表示它是 spa 路由器。例如“localhost:5000/#/app/..”我想删除这个“#”并将路由器作为整个路由器，例如“localhost:5000/app”有人可以帮我解决这个问题吗？

标签： weburl-routingsvelteuri-fragment

解决方案

这是不可能的svelte-spa-router。这个包是一个基于散列的路由器，“#”是这种路由器如何工作的关键。从包文档：

使用基于散列的路由，导航是可能的，这要归功于将当前视图存储在 URL 之后的部分#，称为“散列”或“片段”。

例如，如果您的 SPA 位于名为 的静态文件中index.html，则用于在应用程序中导航的 URL 类似于index.html#/profile、index.html#/book/42等（index.html对于索引文件，该部分通常可以省略，因此您可以创建类似于 的 URL http://example.com/#/profile）。

当我创建这个组件时，Svelte 3 的其他路由器使用 HTML5 历史 API 实现了导航。虽然这些 URL 看起来更好（例如，您实际上可以导航到http://example.com/profile），但它们对于静态单页应用程序并不理想。为了让用户能够共享链接甚至只是刷新页面，您需要在后端有一个服务器来处理请求，因此构建完全静态的应用程序要困难得多。

基于哈希的路由更简单，即使没有服务器也能很好地工作，而且它通常更适合静态 SPA，尤其是当 SEO 不是问题时，例如应用程序需要身份验证的情况。许多流行的应用程序都使用基于哈希的路由，包括 GMail！

如果您希望您的 URL 没有“#”，则需要切换到基于 HTML5 历史记录的路由器，例如svelte-routing或routify。

推荐阅读