前端路由

前端默认采用约定式路由形式

约定式路由即根据前端文件夹结构来自动的生成前端路由配置。

路由规则

下面来介绍我们详细的路由映射规则, 以下为一个基础的 web 文件夹的结构，我们主要关注 web/pages 文件夹，根据该文件夹来 parse 前端路由结构

├── pages
│   ├── detail
│   │   └── $id.tsx
│   └── list
│       └── index.tsx

页面组件

pages 文件夹下的每个文件夹，我们都会认为它是一个页面。上述结构包含 list, detail 两个页面。

普通路由

最常见的普通路由即 /, /list, /user 这种我们只需要创建同名文件夹或同名组件即可，我们会自动省略 /index.tsx

• /list/index.tsx 映射为 /list
• /user.tsx 映射为 /user
• /index.tsx 映射为 /

动态路由

动态路由即携带参数的路由，例如 /detail/:id 这种

• /detail/$id.vue 映射为 /detail/:id
• /detail/$foo/$bar.tsx 多参数的情况下映射为 /detail/:foo/:bar

可选参数路由

由于 ? 符号无法作为文件名使用，所以这里我们需要用 # 号代替

• /detail/$id#.tsx 映射为 /detail/:id?

约定式路由不支持生成嵌套路由