首页 > 其他 > 详细

UMI学习-8 antd Menu点击 切换框架页内容页面

时间:2020-02-01 23:49:10      阅读:202      评论:0      收藏:0      [点我收藏+]

本节实现一个点击左侧menu在右侧content切换页面效果,原始代码请从UMI学习-6开始看

1、在pages下添加两个组件,User,UserRole

import React from ‘react‘;
class User extends React.Component { 
  render() {
    return (
      <div>用户管理</div>
    );
  }
}
export default User;
import React from ‘react‘;
class UserRole extends React.Component { 
  render() {
    return (
      <div>角色管理</div>
    );
  }
}
export default UserRole;

2、修改umirc.ts routes部分如下

const config: IConfig =  {
  treeShaking: true,
  routes: [
    {
       path: ‘/mainfrm‘,
       component: ‘../layouts/BasicLayout‘,
       routes: [
        { path: ‘/mainfrm‘, component: ‘../pages/User‘ },
        { path: ‘/mainfrm/user‘, component: ‘../pages/User‘ },
        { path: ‘/mainfrm/userrole‘, component: ‘../pages/UserRole‘ },
      ]
    },
    {
      path: ‘/‘,
      component: ‘../layouts/index‘,
      routes: [
        { path: ‘/‘, component: ‘../pages/index‘ }
      ]
    }
  ],

3、修改leftmenutree中state代码为

class LeftMenuTree extends React.Component {
  state={list:[{"id":0,"title":"首页","url":"/","children":[]},{"id":1,"title":"权限配置","parentid":0,"children":[{"id":2,"title":"用户管理","url":"/mainfrm/user","parentid":1,"children":[]},{"id":3,"title":"角色管理","url":"/mainfrm/userrole","parentid":1,"children":[]}]}]};

4、运行正常

技术分享图片

 

 技术分享图片

 

UMI学习-8 antd Menu点击 切换框架页内容页面

原文:https://www.cnblogs.com/zhaogaojian/p/12250634.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!