Svelte布局重置问题：导航栏重复且激活链接不符合预期

问题分析 #

你当前的文件结构中，test/+layout.svelte没有添加@test后缀，导致它会继承根目录的+layout.svelte，所以访问/test路由时，根布局的导航栏和test目录的布局导航栏会同时渲染，出现两个导航栏的情况。而你需要的是不同路由显示独立的导航栏，就要让test路由的布局完全替换根布局。

修正步骤 #

1. 调整布局文件命名
   将test/目录下的+layout.svelte重命名为+layout@test.svelte，修改后的文件结构如下：

   src/routes/
   │ test/
   │ ├ +page@test.svelte
   │ └ +layout@test.svelte
   │
   ├ +page.svelte
   └ +layout.svelte
   

   加上@test后缀后，这个布局文件会完全替代根布局，不再继承根布局的内容，访问/test时只会渲染+layout@test.svelte里的导航栏。

2. 配置独立导航栏逻辑

   • 在根目录的+layout.svelte中，编写首页及其他非test路由的导航栏，并通过$page.url.pathname判断激活状态：

     <nav>
       <a href="/" class:active={$page.url.pathname === '/'}>首页</a>
       <a href="/test" class:active={$page.url.pathname === '/test'}>测试页</a>
     </nav>
     <slot />
     

   • 在test/+layout@test.svelte中，编写test路由专属的导航栏，同样处理激活链接：

     <nav>
       <a href="/test" class:active={$page.url.pathname === '/test'}>测试首页</a>
       <a href="/test/sub" class:active={$page.url.pathname === '/test/sub'}>测试子页</a>
     </nav>
     <slot />
     

3. 验证效果
   访问根路径/时，显示根布局的导航栏；访问/test路径时，只显示test布局的导航栏，两个路由的导航栏独立且激活链接正常工作。

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