Svelte-spa-router启动时落地页URL自动添加#哈希的解决方法

直接在App.svelte的脚本块最顶部加一段路径检测逻辑即可，不需要修改路由规则，也不会触发整页刷新。

具体实现 #

修改你的App.svelte代码如下：

<script>
import Router from 'svelte-spa-router'
// 按你实际项目的组件路径补全引入即可
import Login from './pages/Login.svelte'
import Home from './pages/Home.svelte'
import CompList from './pages/CompList.svelte'
import ListOverview from './pages/ListOverview.svelte'
import AddCompany from './pages/AddCompany.svelte'
import HeaderTest from './components/HeaderTest.svelte'

// 核心逻辑：页面初始化时检测地址是否带哈希段
if (!window.location.hash) {
  // 用replace替换地址，不会在浏览历史留下多余记录
  window.location.replace('/#/')
}

const routes = {
  '/': Login,
  '/home': Home,
  "/openlist/:id": CompList,
  "/orderOverview": ListOverview,
  "/addcompany": AddCompany
}
</script>

<Router {routes} />
<HeaderTest />
<!-- 冗余代码提示：svelte-spa-router会自动匹配路由渲染对应组件，不需要手动写svelte:component挂载页面，这行建议删除，避免出现重复渲染、参数读取异常的问题 -->
<!-- <svelte:component this={page1} {params} /> -->

效果说明 #

• 直接访问根地址http://10.11.65.60:5000/时，会立刻无刷新跳转到http://10.11.65.60:5000/#/，正常加载Login登录页
• 所有带use:link指令的链接跳转逻辑不受任何影响，保持原有哈希路由的表现
• 因为用了replace方法修改地址，用户点击浏览器返回按钮时不会回退到无哈希的根路径，交互更流畅

内容的提问来源于stack exchange，提问作者User G Amsterdam