能否在SvelteKit中创建含连续两个动态slug的文件夹式路由?
如何在SvelteKit中实现连续动态slug的路由(/l/:token/:secret)
完全可以通过SvelteKit的文件夹式路由实现这个URL结构,具体操作步骤如下:
- 在
src/routes目录下创建名为l的文件夹 - 在
l文件夹内创建动态文件夹[token](方括号是SvelteKit标识动态参数的语法) - 继续在
[token]文件夹内创建另一个动态文件夹[secret] - 最后在
[secret]文件夹中添加+page.svelte文件(如果需要服务端处理逻辑,可额外创建+page.server.js/ts)
完成后,这个路由结构会精准匹配/l/[任意值]/[任意值]的请求,完全对应你原有应用的/l/:token/:secret路由规则,无需修改现有URL。
获取动态参数的方式
在页面组件中,可以通过SvelteKit的内置store获取这两个参数:
<script> import { page } from '$app/stores'; const { token, secret } = $page.params; </script> <div> <p>当前Token: {token}</p> <p>当前Secret: {secret}</p> </div>
如果需要在服务端处理逻辑(比如验证参数有效性),可以在+page.server.js中通过params对象获取:
export async function load({ params }) { const { token, secret } = params; // 这里编写你的服务端逻辑,比如参数校验、数据查询等 return { token, secret }; }
内容的提问来源于stack exchange,提问作者cody mikol
相关产品推荐
相关产品推荐

