问题描述
我使用 svelte-spa-router npm 模块作为我的 svelte 项目的路由器。 使用此模块时,它默认在 URL 中添加“#”以表示它是 spa 路由器。 例如“localhost:5000/#/app/..”我想删除这个“#”并使路由器成为整个路由器,例如“localhost:5000/app”有人可以帮我吗?>
解决方法
这对于 svelte-spa-router
是不可能的。这个包是一个基于散列的路由器,“#”是这种路由器工作方式的关键。来自package docs:
使用基于散列的路由,由于将当前视图存储在 #
之后的 URL 部分(称为“散列”或“片段”)中,导航成为可能。
例如,如果您的 SPA 位于名为 index.html
的静态文件中,则用于在应用内导航的 URL 类似于 index.html#/profile
、index.html#/book/42
等({{1 }} 部分通常可以为索引文件省略,因此您可以创建看起来像 index.html
的 URL。
当我创建这个组件时,Svelte 3 的其他路由器使用 HTML5 历史 API 实现了导航。虽然这些 URL 看起来更好(例如,您实际上可以导航到 http://example.com/#/profile
),但它们并不适合静态单页应用程序。为了让用户能够共享链接甚至只是刷新页面,您需要在后端有一个服务器来处理请求,因此构建完全静态的应用要困难得多。
基于哈希的路由更简单,即使没有服务器也能很好地工作,而且它通常更适合静态 SPA,尤其是当 SEO 不是问题时,例如应用程序需要身份验证的情况。许多流行的应用程序都使用基于哈希的路由,包括 GMail!
如果您希望 URL 没有“#”,则需要切换到基于 HTML5 历史记录的路由器,例如 svelte-routing 或 routify。