1

使用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页面上的链接时，它会转到子页面但会刷新整个站点。
如何优化[slug].svelte文件以防止刷新页面？
由于我是 Svelte 和 Sveltekit 的新手，因此对优化整个代码的任何想法表示赞赏。

4

1 回答 1

1

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

于 2021-07-06T18:43:29.767 回答