二、umi路由

最新推荐文章于 2024-08-12 16:30:34 发布

谁诉离殇~

最新推荐文章于 2024-08-12 16:30:34 发布

阅读量6.4k

点赞数 2

分类专栏：框架(level 1) # React系列(level 2) # umi(level 3) 文章标签：前端 react.js

本文链接：https://blog.csdn.net/rocktanga/article/details/122907867

版权

本文详细介绍了umi框架中的路由配置，包括约定式路由、编译时配置式路由（涵盖权限路由、路由动效和Hash路由）以及运行时配置式路由。此外，还讨论了路由跳转的两种方式：标签跳转和函数跳转，并提到了Module Processor在文件处理中的作用。

摘要由CSDN通过智能技术生成

一、路由

路由有三种方式，分别是，约定式路由(即文件路由，根据文件名自动配置)、编译时配置式路由(config/config.js中配置)和运行时配置式路由(src/app.js中配置)

1、约定式路由

注意：若 .umirc.(ts|js) 或 config/config.(ts|js) 文件中对 router 进行了配置，约定式路由将失效、新添的页面不会自动被 umi 编译，umi 将使用编译时配置式路由

约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置

(1)基础路由: 基础路由，就是自动生成的路由。生成的规则是，pages下面的直接子文件作为pages后面的第一级路由，里面的index.js为斜杠/路径。如下

// 假设 pages 目录结构如下：
+ pages/
  + users/
    - index.js
    - list.js
  - index.js
// 那么，umi 会自动生成路由配置如下：
[{ path: '/', component: './pages/index.js' },
  { path: '/users/', component: './pages/users/index.js' },
  { path: '/users/list', component: './pages/users/list.js' },]

(2)动态路由: umi 里约定，带 $ 前缀的目录或文件为动态路由。对象路由里面动态路由用：表示

// 假设 pages 目录结构如下：
+ pages/
  + $post/
    - index.js
    - comments.js
  + users/
    $id.js
  - index.js
// 那么，umi 会自动生成路由配置如下：
[{ path: '/', component: './pages/index.js' },
  { path: '/users/:id', component: './pages/users/$id.js' },
  { path: '/:post/', component: './pages/$post/index.js' },
  { path: '/:post/comments', component: './pages/$post/comments.js' },]

(3)可选的动态路由: umi 里约定动态路由如果带 $ 后缀，则为可选动态路由。对象路由里面可选路由用？表示

// 假设 pages 目录结构如下：
+ pages/
  + users/
    - $id$.js
  - index.js
// 那么，umi 会自动生成路由配置如下：
[{ path: '/': component: './pages/index.js' },
  { path: '/users/:id?': component: './pages/users/$id$.js' },]

(4)嵌套路由: umi 里约定目录下有 _layout.js 时会生成嵌套路由，以 _layout.js 为该目录的 layout。对象路由里面嵌套路由写在routes里面

// 假设 pages 目录结构如下：
+ pages/
  + users/
    - _layout.js
    - $id.js
    - index.js
// 那么，umi 会自动生成路由配置如下：
[{ path: '/users', component: './pages/users/_layout.js',
    routes: [
     { path: '/users/', component: './page