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

问题描述

使用 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,})

    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 的新手，因此对优化整个代码的任何想法表示赞赏。

解决方法

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