Skip to content

Commit 137c4b2

Browse files
committed
docs: add routing
1 parent 960c96c commit 137c4b2

File tree

2 files changed

+37
-0
lines changed

2 files changed

+37
-0
lines changed

.vitepress/config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const vue3VantMobile: DefaultTheme.NavItemWithLink[] = [
1010
{ text: '目录结构', link: '/vue3-vant-mobile/directory'},
1111
{ text: '图标', link: '/vue3-vant-mobile/icons' },
1212
{ text: '浏览器适配', link: '/vue3-vant-mobile/browser-adaptation' },
13+
{ text: '路由', link: '/vue3-vant-mobile/routing'}
1314
]
1415

1516
const vue3VarletMobile: DefaultTheme.NavItemWithLink[] = [

vue3-vant-mobile/routing.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: 路由
3+
outline: deep
4+
---
5+
6+
# :hash: 路由 {#routing}
7+
8+
路由是组织起一个应用的关键骨架。
9+
10+
## 基于文件的路由 {#file-based-routing}
11+
12+
vue3-vant-mobile 使用基于文件的路由系统,由 [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) 插件实现。
13+
14+
在我们的模板中,插件相关配置已完成。您只需在 `src/pages` 文件夹中添加 `.vue` 文件,插件会根据文件名自动生成对应的路由结构。
15+
16+
以下是一个简单的示例:
17+
18+
```text
19+
src/pages/
20+
├── index.vue
21+
├── about.vue
22+
└── users/
23+
├── index.vue
24+
└── [id].vue
25+
```
26+
27+
这将生成以下路由:
28+
29+
- `/`: -> 渲染 `index.vue` 组件
30+
- `/about`: -> 渲染 `about.vue` 组件
31+
- `/users`: -> 渲染 `users/index.vue` 组件
32+
- `/users/:id`: -> 渲染 `users/[id].vue` 组件。 `id` 成为路由参数。
33+
34+
::: tip
35+
通常,您只需创建业务页面即可,如果您希望深入了解并进行高级配置,请访问 [官网](https://uvr.esm.is/)
36+
:::

0 commit comments

Comments
 (0)