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