在苗条和动态路由中无需刷新的页面加载

Question

使用 graphql 和动态路由加载页面而不刷新的最佳方法是什么。我有一个名为 kindergarten 的文件，无需刷新整个页面即可完美加载：

<script context="module">
  import { gql, GraphQLClient } from 'graphql-request'

  export async function load() {
    const graphcms = new GraphQLClient(import.meta.env.VITE_GRAPHCMS_URL, {
      headers: {},
    })

    const query = gql`
      query MyQuery {
        terms(where: { taxonomies: CATEGORY }) {
          nodes {
            slug
            name
            termTaxonomyId
          }
        }
      }
    `

    const { terms } = await graphcms.request(query)

    return {
      props: {
        posts: terms.nodes,
      },
    }
  }
</script>

<script>
  import { SITE_NAME } from '$lib/store.js'
  let date = new Date()
  const [month, day, year] = [
    date.getMonth() + 1,
    date.getDate(),
    date.getFullYear(),
  ]
  export let posts = []
</script>

<svelte:head>
  <title>Sample Title - {SITE_NAME}</title>
  <meta
    name="description"
    content="Sample description  [Update: {year}/{month}/{day}]" />
</svelte:head>

{#each posts as post (post.termTaxonomyId)}
  <a
    tax-id={post.termTaxonomyId}
    href="/kindergarten/province/{post.slug}"
    target="blank">
    {post.name}
  </a>
  <br />
{/each}

我还有另一个页面叫做 [slug].svelte :

<script context="module">
  import { gql, GraphQLClient } from 'graphql-request'
  export async function load(ctx) {
    let slug = ctx.page.params.slug
    const graphcms = new GraphQLClient(import.meta.env.VITE_GRAPHCMS_URL, {
      headers: {},
    })

    const query = gql`
      query MyQuery {
        terms(where: { taxonomies: CATEGORY, slug: "${slug}" }) {
          nodes {
            name
            description
          }
        }
      }
    `

    const { terms } = await graphcms.request(query)
    return { props: { slug, post: terms.nodes } }
  }
</script>

<script>
  import { SITE_NAME } from '$lib/store.js'
  export let slug
  export let post
</script>

<svelte:head>
    <title>{post[0].name} - {SITE_NAME}</title>
</svelte:head>

<h1>Slug : {slug}</h1>
{#each post as data}
  <p>Name: {data.name}</p>
  <br />
  {#if data.description}
    <p>Description: {data.description}</p>
  {:else}
    <p>Ther is no Description</p>
  {/if}
{/each}

当我在 kindergarten 页面上单击 link 时，它会转到子页面但会刷新整个站点。
如何优化 [slug].svelte 文件以防止刷新页面？
由于我是 Svelte 和 Sveltekit 的新手，任何优化整个代码的想法都将受到赞赏。

Answer 1

您正在链接到一个新页面，因此刷新是有意义的，因为它将转到一个全新的页面 ([slug].svelte)。听起来您正在尝试将数据加载到 kindergarten.svelte 页面？在那种情况下，制作一个组件，而不是页面，您可以在其中将数据传递给组件，组件将被更新，而不是整个页面。在此处查看文档中的示例：https://svelte.dev/tutorial/component-bindings

在苗条和动态路由中无需刷新的页面加载

Page load without refresh in svelte and dynamic routing

graphql

dynamic-routing

svelte

svelte-component

sveltekit