87 lines
2.2 KiB
Markdown
87 lines
2.2 KiB
Markdown
# 自动路由系统
|
||
|
||
## 背景
|
||
|
||
前端路由的出现，主要是为了解决 **单页应用（SPA）** 在用户体验和开发模式上的核心痛点，它已经成为现代前端开发的基础能力之一。
|
||
|
||
单页应用（SPA）的核心特点是只有一个 HTML 文件，所有页面内容都通过 JavaScript 动态切换。如果没有前端路由：
|
||
|
||
- 用户在不同页面间切换时，浏览器的 URL 不会变化。
|
||
- 刷新页面会直接回到应用初始状态，之前的操作和页面状态全部丢失。
|
||
- 无法通过浏览器的「前进 / 后退」按钮导航，也不能用书签保存当前页面。
|
||
|
||
前端路由通过监听 URL 变化（如 /#/home 或 /home），动态渲染对应的组件，让 URL 和页面内容保持同步，彻底解决了这个问题。
|
||
|
||
## 开启 SPA
|
||
|
||
脚手架默认自动启用
|
||
|
||
```vue [App.vue] {5}
|
||
<script lang="ts" setup></script>
|
||
|
||
<template>
|
||
<div>
|
||
<router-view /> // 使用 vue router 依赖作为支持
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped></style>
|
||
```
|
||
|
||
## 常规注册路由
|
||
|
||
:::tip
|
||
注意在 hucky 中不使用常规注册方法
|
||
:::
|
||
|
||
路由器实例是通过调用 `createRouter()` 函数创建的
|
||
|
||
```ts {7-10}
|
||
import { createMemoryHistory, createRouter } from 'vue-router'
|
||
|
||
import HomeView from './HomeView.vue'
|
||
import AboutView from './AboutView.vue'
|
||
|
||
// 通过手动编写 path 和引入 vue 文件来配置路由
|
||
const routes = [
|
||
{ path: '/', component: HomeView },
|
||
{ path: '/about', component: AboutView },
|
||
]
|
||
|
||
const router = createRouter({
|
||
history: createMemoryHistory(),
|
||
routes,
|
||
})
|
||
```
|
||
|
||
## 组织页面文件
|
||
|
||
在 Hucky 中，按照文件资源路径自动渲染为路由路径
|
||
|
||
```plain {7-12}
|
||
.
|
||
├─ src
|
||
│ ├─ apis
|
||
│ ├─ assets
|
||
│ ├─ components
|
||
│ ├─ ...
|
||
│ ├─ pages
|
||
│ │ ├─ index.vue --> /
|
||
│ │ ├─ user
|
||
│ │ │ │─ index.vue --> /user
|
||
│ │ │ │─ account.vue --> /user/account
|
||
│ │ └─ └─ change-password.vue --> /user/change-password
|
||
│ ├─ ...
|
||
│ └─ App.vue
|
||
├─ index.html
|
||
└─ package.json
|
||
```
|
||
|
||
::: warning
|
||
页面文件统一使用小写+中划线方式命名
|
||
:::
|
||
|
||
## 特殊规则
|
||
|
||
在 `/src/router/rules` 中通过字符串匹配的方式为 router 中的某个路径添加规则
|