File tree Expand file tree Collapse file tree 2 files changed +37
-0
lines changed Expand file tree Collapse file tree 2 files changed +37
-0
lines changed Original file line number Diff line number Diff 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
1516const vue3VarletMobile : DefaultTheme . NavItemWithLink [ ] = [
Original file line number Diff line number Diff line change 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+ :::
You can’t perform that action at this time.
0 commit comments