Svelte Navigator多查询参数配置问题求助

你不需要修改路由结构，查询参数（?name=xxx这类）不会影响svelte-navigator的路由匹配逻辑——Route的path属性只匹配URL中?之前的路径部分，不管有没有查询参数，只要路径是/就会匹配Homepage，路径是/something就会匹配Something页面。

正确的App组件配置 #

直接保留你最初的路由结构即可，不需要额外修改：

<main>
  <Router primary={false}>
    <Route path={'/'}>
      <Homepage />
    </Route>
    <Route path={'/something'}>
      Something
    </Route>
    <Route>
      <h3>Default</h3>
    </Route>
  </Router>
</main>

在Homepage中获取查询参数 #

要拿到name和country参数，只需通过useLocation获取查询字符串，再用URLSearchParams解析即可，修改你的Homepage组件：

<script lang="ts">
  import { useLocation } from 'svelte-navigator'

  const location = useLocation()
  
  // 解析查询参数
  $: searchParams = new URLSearchParams($location.search)
  $: name = searchParams.get('name')
  $: country = searchParams.get('country')

  $: console.log('name:', name, 'country:', country)
</script>

<main>
  <h1>Homepage</h1>
  {#if name}
    <p>Hello, {name}!</p>
  {/if}
  {#if country}
    <p>Your country: {country}</p>
  {/if}
</main>

为什么你之前的配置无效？ #

你错误地把查询参数当成了路径参数（比如:name匹配的是/john这种路径，而非?name=john），同时嵌套的/*路由打乱了原有的匹配优先级，导致访问/?name=john时路由匹配出现异常，显示了默认页面。

内容的提问来源于stack exchange，提问作者marielle