自动路由系统

背景

前端路由的出现，主要是为了解决 单页应用（SPA） 在用户体验和开发模式上的核心痛点，它已经成为现代前端开发的基础能力之一。

单页应用（SPA）的核心特点是只有一个 HTML 文件，所有页面内容都通过 JavaScript 动态切换。如果没有前端路由：

用户在不同页面间切换时，浏览器的 URL 不会变化。
刷新页面会直接回到应用初始状态，之前的操作和页面状态全部丢失。
无法通过浏览器的「前进 / 后退」按钮导航，也不能用书签保存当前页面。

前端路由通过监听 URL 变化（如 /#/home 或 /home），动态渲染对应的组件，让 URL 和页面内容保持同步，彻底解决了这个问题。

开启 SPA

脚手架默认自动启用

<script lang="ts" setup></script>

<template>
  <div>
    <router-view /> // 使用 vue router 依赖作为支持
  </div>
</template>

<style scoped></style>

常规注册路由

:::tip 注意在 hucky 中不使用常规注册方法 :::

路由器实例是通过调用 createRouter() 函数创建的

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 中，按照文件资源路径自动渲染为路由路径

.
├─ 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 中的某个路径添加规则

2.2 KiB Raw Blame History Unescape Escape

自动路由系统

背景

开启 SPA

常规注册路由

组织页面文件

特殊规则

2.2 KiB

Raw Blame History