尝试使用插槽时，为什么我的svelte js路由器链接组件在演示SPA项目中中断了路由？

问题描述

我是Svelte和JS的新手。 Iam在完成框架文档之后，将构建一个演示仪表板项目，以掌握Svelte。为此，我没有在该项目中使用任何路由器，只是我从一个中级帖子中获取了一些示例代码，以使用svelte商店构建一个简单而最小的路由器。

在我的应用中，我有2个页面组件： Home.svelte 和 About.svelte 。

我有一个 router.js 文件，如下所示：

import Home from '@pages/Home.svelte';
import About from '@pages/About.svelte';
import { writable } from 'svelte/store';

const router = {
  '/': Home,'/home': Home,'/about': About
}

export default router;
export const curRoute = writable('/home');

在我的 App.svelte 中，我有：

<script>
 import router,{ curRoute } from "@router/router";

 onMount(() => {
    curRoute.set(window.location.pathname);
    if (!history.state) {
      window.history.replaceState(
        { path: window.location.pathname },"",window.location.href
      );
    }

  });
</script>

<svelte:component this={router[$curRoute]} />

我有一个文本链接组件，在使用时可以正常工作：

<script>
  import { curRoute } from "@router/router";
  export let page = {
    path: "/home",name: "Home"
  };
  function redirectTo(event) {
    // change current router path
    curRoute.set(event.target.pathname);
    // push the path into web browser history API
    window.history.pushState(
      { path: page.path },window.location.origin + page.path
    );
  }
</script>

<style>
  a {
    text-transform: uppercase;
    text-decoration: underline;
    padding: 1rem;
  }
</style>

<a href={page.path} on:click|preventDefault={redirectTo}>{page.name}</a>

在某些时候，我需要相同的组件，但能够包装一些附加的标记，例如卡片或任何其他元素。那是我以为我会使用精简插槽功能的地方。因此，我构建了第二个组件，该组件与上面的组件非常相似，但是带有一个插槽，而不是 {page.name} 变量。该组件是这样的：

<script>
  import { curRoute } from "@router/router";
  export let page = {
    path: "/home",window.location.origin + page.path
    );
  }
</script>

<style>
  a {
    text-transform: uppercase;
    text-decoration: underline;
    padding: 1rem;
  }
</style>

<a href={page.path} on:click|preventDefault={redirectTo}>
    <slot>{page.name}</slot>
</a>

如果没有提供广告位内容，则

{page.name} 变量将用作默认值。我能够导入和使用该组件。这是两个部分并排。

<RouterLink page={{path: '/about',name: 'About'}} />

<RouterLinkSlot page={{path: '/about',name: 'About'}}>
  <span>A nice slotted link</span>
</RouterLinkSlot>

但是，当我单击前端上的呈现的链接时，它不会引发任何错误，但是不会加载相关的页面组件，并且页面区域仍为空白，而它适用于非插槽版本。试图寻找答案，但找不到答案。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript svelte svelte-component