Svelte结合GraphQL实现动态路由无刷新页面加载与优化问题

一、整页刷新的核心原因 #

你遇到的跳转整页刷新和[slug].svelte本身没有直接关系，先排查两个常见问题：

1. 你kindergarten页面的a标签添加了target="blank"属性，SvelteKit客户端路由默认会忽略带target属性的链接，走原生浏览器跳转，自然会触发整页刷新。如果不需要开新页，直接删掉该属性即可；如果确实需要开新标签页，整页刷新是浏览器默认行为，无法避免。
2. 检查动态路由文件路径是否匹配：你链接的href为/kindergarten/province/{post.slug}，对应的[slug].svelte文件必须放在src/routes/kindergarten/province/目录下，路径不匹配会触发404走原生跳转。

二、[slug].svelte 优化后的完整代码 #

优化点说明：修复GraphQL字符串拼接注入风险、添加空值判断避免报错、增加错误处理逻辑、简化冗余的数组循环。

<script context="module">
  import { gql, GraphQLClient } from 'graphql-request'
  // 建议把这个实例抽成$lib/utils/graphql.js公用，不用每个页面重复实例化
  const graphcms = new GraphQLClient(import.meta.env.VITE_GRAPHCMS_URL, {
    headers: {},
  })

  export async function load(ctx) {
    const slug = ctx.page.params.slug
    // 改用变量传参，避免GraphQL注入风险
    const query = gql`
      query MyQuery($slug: String!) {
        terms(where: { taxonomies: CATEGORY, slug: $slug }) {
          nodes {
            name
            description
          }
        }
      }
    `

    try {
      const { terms } = await graphcms.request(query, { slug })
      return { 
        props: { 
          slug, 
          // slug唯一匹配，直接取第一条，不用返回数组
          post: terms.nodes.length ? terms.nodes[0] : null 
        } 
      }
    } catch (err) {
      // 异常时返回404
      return {
        status: 404,
        error: new Error('当前分类不存在')
      }
    }
  }
</script>

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

<svelte:head>
  <title>{post ? `${post.name} - ${SITE_NAME}` : `分类不存在 - ${SITE_NAME}`}</title>
</svelte:head>

{#if post}
  <h1>Slug : {slug}</h1>
  <p>Name: {post.name}</p>
  <br />
  {#if post.description}
    <p>Description: {post.description}</p>
  {:else}
    <p>暂无描述</p>
  {/if}
{:else}
  <h1>未找到对应的分类信息</h1>
{/if}

三、整体代码优化建议 #

• 把GraphQLClient实例抽成公共工具函数，统一存放在$lib/utils/graphql.js中，所有页面复用同一个实例，减少重复代码
• 如果你使用的是SvelteKit 1.0+版本，建议把load逻辑移到对应的+page.js文件中，和视图组件分离，更符合官方规范
• 可以给a标签添加data-sveltekit-preload-data属性开启预加载，用户hover链接时就提前请求数据，跳转更流畅
• 可添加全局加载状态，路由切换过程中显示骨架屏或加载提示，提升用户体验

内容的提问来源于stack exchange，提问作者Sarah Diba