Skip to content

Commit

Permalink
docs: add routing
Browse files Browse the repository at this point in the history
  • Loading branch information
CharleeWa committed Aug 13, 2024
1 parent 960c96c commit 137c4b2
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 0 deletions.
1 change: 1 addition & 0 deletions .vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const vue3VantMobile: DefaultTheme.NavItemWithLink[] = [
{ text: '目录结构', link: '/vue3-vant-mobile/directory'},
{ text: '图标', link: '/vue3-vant-mobile/icons' },
{ text: '浏览器适配', link: '/vue3-vant-mobile/browser-adaptation' },
{ text: '路由', link: '/vue3-vant-mobile/routing'}
]

const vue3VarletMobile: DefaultTheme.NavItemWithLink[] = [
Expand Down
36 changes: 36 additions & 0 deletions vue3-vant-mobile/routing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: 路由
outline: deep
---

# :hash: 路由 {#routing}

路由是组织起一个应用的关键骨架。

## 基于文件的路由 {#file-based-routing}

vue3-vant-mobile 使用基于文件的路由系统,由 [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) 插件实现。

在我们的模板中,插件相关配置已完成。您只需在 `src/pages` 文件夹中添加 `.vue` 文件,插件会根据文件名自动生成对应的路由结构。

以下是一个简单的示例:

```text
src/pages/
├── index.vue
├── about.vue
└── users/
├── index.vue
└── [id].vue
```

这将生成以下路由:

- `/`: -> 渲染 `index.vue` 组件
- `/about`: -> 渲染 `about.vue` 组件
- `/users`: -> 渲染 `users/index.vue` 组件
- `/users/:id`: -> 渲染 `users/[id].vue` 组件。 `id` 成为路由参数。

::: tip
通常,您只需创建业务页面即可,如果您希望深入了解并进行高级配置,请访问 [官网](https://uvr.esm.is/)
:::

0 comments on commit 137c4b2

Please sign in to comment.