为了防止路由器匹配无效输入,您可以指定一个匹配器。例如,您可能希望像/colors/[value]
这样的路由匹配十六进制值,例如/colors/ff3e00
,但不匹配像/colors/octarine
这样的命名颜色或任何其他任意输入。
首先,创建一个名为src/params/hex.js
的新文件,并从中导出一个match
函数
src/params/hex
export function match(value) {
return /^[0-9a-f]{6}$/.test(value);
}
然后,要使用新的匹配器,将src/routes/colors/[color]
重命名为src/routes/colors/[color=hex]
。
现在,每当有人导航到该路由时,SvelteKit 都会验证color
是否为有效的hex
值。如果不是,SvelteKit 将尝试匹配其他路由,最终返回 404。
匹配器在服务器和浏览器上都运行。
1
2
<h1>color picker</h1>