如何在Qwik的基于目录的路由中限制参数值类型？

在Qwik的文件系统路由中，你可以通过参数匹配规则来限定路由参数的类型，避免非数字参数命中分页路由，具体有两种实现方式：

1. 使用预定义的整数类型规则 #

直接修改路由文件夹的命名，将原有的[pageNumber]改为[pageNumber=int]，这样路由会自动只匹配数字类型的pageNumber参数，非数字的URL（如/blog/john）会直接返回404，不会进入该路由页面。

修改后的路由结构如下：

- src
  - routes
    - blog
      - index.jsx
      - [pageNumber=int]
        - index.jsx

2. 自定义正则匹配规则 #

如果需要更灵活的参数校验（比如限定参数为正整数），可以使用正则表达式来定义参数匹配规则，将文件夹命名为[pageNumber:\\d+]。这种方式下，只有匹配\\d+（一个或多个数字）的参数才会命中该路由。

组件内的参数处理 #

无论使用哪种方式，在组件中通过useParams()获取到的pageNumber依然是字符串类型，你可以直接转换为数字使用，也可以添加兜底校验确保参数有效性：

import { useParams, useLocation } from '@builder.io/qwik-city';
import { component$ } from '@builder.io/qwik';

export default component$(() => {
  const params = useParams();
  const location = useLocation();
  const pageNumber = Number(params.pageNumber);

  // 兜底校验：若参数无效则重定向到博客首页
  if (isNaN(pageNumber) || pageNumber < 1) {
    location.href = '/blog';
    return null;
  }

  return <div>当前页码：{pageNumber}</div>;
});

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