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

在页面直接打印，可以发现已经引进来了，可以之直接在页面使用

页面创建

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

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

二、约定式路由

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

约定式路由传参

不清楚useEffect可以看一下Hooks，这里简单的提一下
useEffect：函数组件中没有生命周期，在函数组件中可以用useEffect来代替，可以将useEffect看作react生命周期中的componentDidMount、componentDidUpdate、componentWillUnmount这三个函数的组合。

在浏览器输入：http://localhost:8000/shop/随便传递的参数
可以看到下面的截图，控制台打印出来了传递过来的参数

声明式编程式跳转

编程式跳转

语法：history.push()
注：类组件也需要引入history

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

vue路由route的restful风格传参
前面讲了vue的ref传值和bus总线传值CSDN,父组件给子组件传值CSDN,子组件给父组件传值CSDN四种传值方式,以及路由的两种跳转方式,本篇文章再介绍一下vue的路由restful风格(表述性 ...
「后端小伙伴来学前端了」Vue-Router 路由各种跳转、传参、小知识
前言学完Vuex方面的操作就该来学学Vue中的路由操作了- xdm冲一.安装 vue-cli 安装 vue add router 做完这一步基础环境都搭好了. 项目中会多一个文件夹,内容如下: ...
Vue路由动态渲染和动态传参
一.动态渲染路由 // router/routerjs{ path: '/movie/1', component: Movie}, //app组件<router-link to="/m ...
React路由跳转时通过传参进行动态渲染的方法
最近在react项目中,需要根据点击元素的不同,而切换同一个路由地址下的一个Tab选项卡的不同区域中,我采用的是通过在路由跳转时候顺带传值的方法,通过值的不同而切换到选项卡的不同区域中. 首先是pag ...
vue路由传参刷新丢失
没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: 复制代码 ro ...
URL传参小用法获取url中的参数
写页面的时候发现的小用法,记录下来,关于url静态传参的问题. 首先列举下获取URL中参数的几种方法方法一:正则法这个正则是寻找&+url参数名字=值+&*/ 这里参考网址 ...
[华为路由系列-2] 等价路由介绍和配置
等价静态路由所谓等价路由就是路由器通过路由选举规则比较不出优劣的路由,等价路由的路由优先级必须一样. (使用场景:当网络设备有多条去往目标网段的路径,并且这些路径的带宽一致或者带宽差异不大时,可以使 ...
eigrp配置实验_路由器 OSPF 动态路由配置
本文档详细介绍路由器 OSPF 动态路由配置的方法,文内含长段代码可复制可往左滑,希望对大家有帮助! 实验目的掌握 OSPF 协议的配置方法掌握查看通过动态路由协议 OSPF 学习产生的路由熟悉 ...
Vue.js-Day05【安装路由（vue-router）、如何使用vue-router、404配置、激活class、动态路由、编程式导航、路由嵌套、路由元信息、导航拦截】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.单页面应用 1.1.多页面应用 1.2.单页面应用 1.3.vue-router 2.安装vue-rout ...

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