SvelteKit中如何使用goto()不刷新页面修改URL？

一、添加URL后缀（避免页面刷新） #

别用会触发刷新的goto()，分场景处理：

• 原生JS环境：直接用浏览器history.pushState() API，既能改URL后缀，又完全不刷新页面：

  // 示例：将当前/route改为/route/something
  history.pushState({}, '', `${window.location.pathname}/something`);
  

  注意：这种方式不会触发前端框架的路由生命周期钩子，用框架的话优先用框架自带路由方法。

• Next.js环境（从动态路由和goto()的描述看，大概率是Next.js）：用useRouter的push方法，默认就是客户端无刷新跳转：

  import { useRouter } from 'next/router';
  
  const router = useRouter();
  // 给当前路径添加后缀something
  router.push(`${router.pathname}/something`);
  

二、修改动态路由参数（比如/watchlist/[lang]） #

用框架的客户端路由API实现，以Next.js为例：
假设当前路由是/watchlist/en，要切换为/watchlist/zh，直接用router.push传入目标路径即可，全程无刷新：

import { useRouter } from 'next/router';

const router = useRouter();
// 修改lang参数为zh
router.push('/watchlist/zh');

// 如需保留其他查询参数，可用对象形式传入
router.push({
  pathname: '/watchlist/[lang]',
  query: { ...router.query }, // 保留原有查询参数
}, '/watchlist/zh');

如果是React Router环境，用useNavigate方法实现同样效果：

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
// 添加URL后缀
navigate(`${window.location.pathname}/something`);
// 修改动态路由参数
navigate('/watchlist/zh');

核心思路：放弃会触发整页刷新的goto()，改用浏览器原生history API或框架提供的客户端路由跳转方法，这类方法只会在客户端更新URL和路由状态，不会刷新页面。

内容的提问来源于stack exchange，提问作者oleh.lavryk