umi 路由

今天药忘吃喽~ 2021-07-24 14:48 659阅读 0赞

在.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同级