Svelte - 路由，当我尝试输入任何网址时，我只会收到“未找到网页”错误

Posted 2023-02-22

【中文标题】Svelte - 路由，当我尝试输入任何网址时，我只会收到“未找到网页”错误

【英文标题】：Svelte - routing , When I try entering any url I only get "No webpage was found" error

【发布时间】：2022-01-24 02:48:37

【问题描述】：

使用“svelte-routing”，因为我需要从许多不同的 url 加载单个页面，不同的 url 作为参数。 例如，如果客户端加载到 my-sight/123 中，则视线需要加载 app.svelte 组件，同时将 123 作为参数传递。 问题是，无论我在“my-sight/”之后输入什么网址，我总是得到一个“未找到网页”页面。 App.svelte：

<script script lang="ts">
  import MenuGenerator from './components/MenuSections/MenuGenerator.svelte';
  import  Router, Route  from 'svelte-routing';
</script>

<Router>
  <Route path="/:accomodation" component=MenuGenerator />
</Router>

MenuGenerator.svelte：

<script script lang="ts">
  export let accomodation: string;
  console.log('hello ', accomodation);
</script>

我已经在 https://codesandbox.io/s/svelte-routing-forked-ztddj 上对此进行了测试，只需在 url 中的 / 之后添加任何内容，然后按 enter，控制台中就会出现相同的文本。

编辑：我们有 QR 码和 NFC 标签，它们的 url 已设置且无法更改。网址是 my-sight/qr_code 。我需要将所有可能的 url 重定向到 home 并将 qr_code 作为值传递的路由。

【问题讨论】：

它并不完全清楚你在做什么，以及你为什么这样做。你想do this?你写的代码说任何“/：id”总是去“家”...

您是否尝试通过：/my-sight?accomodation=123 进行路由？为此，您将使用get() 请求和let accomodation_value = request.query.get("accomodation")。同样，不清楚你要去哪里。

我们有 QR 码和 NFC 标签，它们的 url 已设置且无法更改。网址是 my-sight/qr_code 。我需要将所有可能的 url 重定向到 home 并将 qr_code 作为值传递的路由。

【参考方案1】：

通过最后的编辑/评论，您的用例更有意义。

您可以在浏览器中使用window.location.pathname来识别网址中的二维码。

<script>
  import  Router, Route  from "svelte-routing";
  import Home from "./routes/Home.svelte";
  import  onMount  from "svelte";
  onMount(()=>
     let qr_code = window.location.pathname.substring(1);  // dump leading '/'
     console.log("qr_code: ", qr_code);
  )

</script>

  <Router>
    <div class="box">
      <Route path="/:id" component=Home />
    </div>
  </Router>

（编辑）这个答案专门解决了“我需要将每个可能的 url 重定向到 home 并将 qr_code 作为值传递的路由。

现在听起来，这只是部分要求。 （/编辑）

【讨论】：

遗憾的是仍然没有，当输入任何其他 url 时，几乎没有代码运行。可悲的是，我真的不能给你任何错误日志，如果我输入任何其他网址，它只会给我一个“找不到网页”页面。是的，我已将此代码添加到我的项目中：` onMount(() => let qr_code = window.location.pathname.substring(1); // 转储前导 '/' console.log('qr_code: ',二维码）; ）; `

是的.. 我会说，看到这个问题让我对 SvelteKit 有了很大的了解。这似乎是SvelteKit is to provide the router. 的关键功能虽然您可以使用路由器转到动态路由（[id]-[category].svelte 您只能将request.query 与.js 或.ts API 样式端点一起使用。

哎哟。您所说的是使用当前设置，您可以管理 NFC 的东西，但绝对没有别的（关于我们、联系我们、普通菜单项 XXX 等...）注意：我怀疑this posting would be of help...

【参考方案2】：

解决了！！！

我需要在我的 snowpack 配置中取消注释一行代码。

代码行是：

// match: 'routes', src: '.*', dest: '/index.html' ,

求救！