umijs介绍及基本用法、配置式路由、约定式路由、路由传参等

太过爱你忘了你带给我的痛 2022-12-13 12:40 955阅读 0赞

# umiJS #

Umi 是蚂蚁金服的底层前端框架 中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备。同时有强大的插件扩展各种功能。

# 什么时候不用 umi #

需要支持 IE 8 或更低版本的浏览器  
需要支持 React 16.8.0 以下的 React  
需要跑在 Node 10 以下的环境中  
有很强的 webpack 自定义需求和主观意愿  
需要选择不同的路由方案

### 使用 ###

确保电脑上有nodejs 10.13 或以上

# umi下载安装 #

npm install -g umi 全局安装  
查看版本 umi -v  
安装项目 npm或yarn create @umijs/umi-app  
安装依赖 cnpm install 或 yarn  
启动项目 npm 或 yarn start  
运行 http://localhost:8000

# HTML模板 #

修改默认模板  
新建 src/pages/document.ejs（文件必须是这个明治），umi 约定如果这个文件存在，会作为默认模板  
**作用**:如果要引用第三方js/css文件 可以直接在HTML模板中进行配置。**有很多第三方的插件都没有react版本的 所以采用import的方式是没有办法进行引用的 也就只能采取上面的方式进行引用**

###### 尝试引用第三方jquery ######

jquery CDN:https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]

在页面直接打印，可以发现已经引进来了，可以之直接在页面使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]

# 页面创建 #

umi g命令创建页面或者组件  
在项目根路径下执行  
umi g page xxx（要创建页面名）或umi g page xxx/xxx  
umi g page xxx --typescript --less 创建ts页面与less  
umi g page 新建的文件名/—layout --typescript --less 创建ts页面与less

# 配置路由 #

### 一、配置式路由 ###

#### 1、在项目跟目录下找到".umirc.tc"在集中配置配置式路由 ####

重定向：redirect  
精准匹配：exact  
当前页面标题：title  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]

#### 2、在对应的一级路由页面配置路由出口 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]

### 二、约定式路由 ###

1、删除项目下".umirc.ts"或者将这个文件重新换个名字也行，只要不叫现在这个名字就行。  
\_layout.tsx为一级路由页面，二级路由不用改变正常命名就行  
按照以图中pages文件夹下的格式配置约定式路由，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]

# 约定式路由传参 #

不清楚useEffect可以看一下Hooks，这里简单的提一下  
useEffect：函数组件中没有生命周期，在函数组件中可以用useEffect来代替，可以将useEffect看作react生命周期中的componentDidMount、componentDidUpdate、componentWillUnmount这三个函数的组合。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]  
在浏览器输入：http://localhost:8000/shop/随便传递的参数  
可以看到下面的截图，控制台打印出来了传递过来的参数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]

# 声明式编程式跳转 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]

# 编程式跳转 #

语法：history.push()  
注：类组件也需要引入history  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/583893ccb62e496b89d21090cf02f0a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/373b0888abca480ca3a4f9ce09aefbcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/640e7420450f4194aaef30dc075e2853.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/aaec1f545d824eb9af812d995e3e2884.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/9d0fff864a2843a699470d95aebbf4e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/c028d97f386d4f7587ac0fd2d95fff82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/0544a6b59cd340b6a628a51fac297773.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/f83ac96bde3c4658b2f1eb0ba812de9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/999a1e1cd957433fad31ed402b9dff5b.png