在.umirc.ts的routes进行路由配置
1、配置路由
routes:[{path:'/路径',components:'路径,@为src,不需要引入组件',exact:true}]
配置:
redirect:'/重定向路由路径'
title:'路由页面名称'
wrappers:['/路由校验的组件路径']
其中该组件:
export default (props) => {
校验操作
return {props.children} 如果验证成功返回所在的路由组件
}
2、路由跳转
(1)声明式导航
import { Link,NavLink } from 'umi';
<Link to="/路径">xx</Link>
exact、strict和高亮等配置和react相同
(2)编程式导航(都可以使用this.props.xx的写法)
import { history } from 'umi';
或者this.props.history.push和react相同写法
history.push('/x');
history.push('/xx?键=值');
history.push({
pathname: '/xx',
query: {
参数键值对
},
});
history.goBack();
history.replace('/路径');
参数获取:
history.location.query.键名获取
this.props.location.query
3、路由重定向
import { Redirect } from 'umi'
<Redirect to="/路径" />
4、嵌套路由
routes: [
{
path: '/',
component: '@/layouts/index',
routes: [
{ path: '/user', redirect: '/user/login' },
{ path: '/user/login', component: './user/login' },
],
},
],
父路由上:{this.props.children}显示子路由
5、配置hash路由
history: { type: 'hash' },和nodeModulesTransform同级
umi 路由
最新推荐文章于 2024-06-12 11:37:22 发布