File tree 2 files changed +37
-0
lines changed
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[] = [
10
10
{ text : '目录结构' , link : '/vue3-vant-mobile/directory' } ,
11
11
{ text : '图标' , link : '/vue3-vant-mobile/icons' } ,
12
12
{ text : '浏览器适配' , link : '/vue3-vant-mobile/browser-adaptation' } ,
13
+ { text : '路由' , link : '/vue3-vant-mobile/routing' }
13
14
]
14
15
15
16
const 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