umi 路由

在.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同级
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
umi 中实现路由权限可以通过以下几个步骤: 1. 在路由配置文件中定义路由时,可以添加一个 `authority` 属性来标识该路由需要的权限。比如: ``` routes: [ { path: '/', component: '@/pages/index', authority: ['admin', 'user'] }, ... ] ``` 2. 在应用程序中,可以通过一些方式获取当前用户的权限列表。比如从后端接口获取、从浏览器缓存中获取等等。 3. 在应用程序中,可以编写一个 `Authorized` 组件来控制路由是否可以渲染。该组件可以接收一个权限列表作为参数,然后根据当前用户的权限列表和路由配置中的权限要求,来判断当前路由是否可以渲染。比如: ``` import React from 'react'; import { Redirect, Route } from 'umi'; const Authorized = ({ children, authority }) => { // 获取当前用户的权限列表 const currentUserAuthority = ['admin', 'user']; // 判断当前路由是否可以渲染 if (authority.some(item => currentUserAuthority.includes(item))) { return children; } else { return <Redirect to="/403" />; } }; export default Authorized; ``` 4. 在路由配置文件中使用 `Authorized` 组件来包装需要进行权限控制的路由即可。比如: ``` routes: [ { path: '/', component: '@/layouts/index', routes: [ { path: '/', component: '@/pages/index', authority: ['admin', 'user'], wrapper: Authorized }, ... ] }, ... ] ``` 这样,只有当当前用户的权限列表中包含该路由需要的权限时,该路由才会被渲染出来。否则,用户将被重定向到 403 页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值