AntDesign(React)学习-8 Menu使用 切换框架页内容页面
本节实现一个点击左侧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、运行正常
AntDesign(React)学习-8 Menu使用 切换框架页内容页面的更多相关文章
- AntDesign(React)学习-6 Menu展示数据
1.官方文档请查看https://ant.design/components/menu-cn/antPro自带的菜单功能很强大,但是太复杂了,感觉大部分功能都用不上,下面实现一个简单从后台动态获取菜单 ...
- AntDesign(React)学习-7 Menu添加事件
今天花了大半天时间从老家回到工作地,路上因为肺炎封堵挺厉害,希望国家挺过这个难关,要不大家都失业可就惨了,上一篇做了一个展示数据的demo,这一篇研究antd Menu item点击事件 1.还是先看 ...
- AntDesign(React)学习-1 创建环境
目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...
- 微信小程序学习笔记(二)--框架-全局及页面配置
描述和功能 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑. 响应的数 ...
- AntDesign(React)学习-5 路由及使用Layout布局
前言:学习目标实现点击登录按钮,直接进入后台布局页面,类似下面antd官网文档展示效果 ant.design访问 https://ant-design.gitee.io/components/menu ...
- AntDesign(React)学习-12 使用Table
AntDesign(Vue)版的Table中使用图片https://www.cnblogs.com/zhaogaojian/p/11119762.html 之前在使用VUE版Table时,使用大图片时 ...
- AntDesign(React)学习-3 React基础
前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...
- AntDesign(React)学习-2 第一个页面
1.前面创建了第一个项目jgdemo,结构如下,使用TypeScript. 2.yarn start启动项目 3.点击GettingStarted是umi的官方网站 https://umijs.org ...
- AntDesign(React)学习-9 Dva model reducer实践
今天肺炎增长数字依然吓人,感觉穿越到丧失片里了. 本节开始学习dva model使用,官网的讲解太文档化,对新手实践不太友好,自己简化了一个最简单的演示代码. 1.在src,models文件夹下创建u ...
随机推荐
- MTK迁移Oracle单库
MTK迁移Oracle单库 一. Mtk安装 1.1 安装jdk 要求jdk版本在1.7以上 安装完jdk后将需要的数据库jdbc驱动拷贝到$JAVA_HOME/jre/lib/ext 目录 ...
- C#实现的Table的Merge,以及实现Table的Copy和Clone
C#实现的对两个Table进行Merge,两表必须存在至少一个公共栏位作为连接项,否则连接就失去了意义.如下是对两个table进行Merge的详细代码: private void button1_Cl ...
- Dalvik虚拟机和Art虚拟机
Dalvik虚拟机 DVM是Dalvik Virtual Machine的缩写,是Android4.4及以前使用的虚拟机,所有android程序都运行在android系统进程里,每个进程对应着一个Da ...
- 《手把手教你构建自己的 Linux 系统》学习笔记(6)
目录 /dev 目录是干什么的? /proc 和 /sys 目录是干什么的? udev 这个软件是干什么用的? 目录映射是临时性的,还是永久性的? 命令行里大括号 "{}" 的作用 ...
- NIO学习笔记,从Linux IO演化模型到Netty—— Java NIO零拷贝
同样只是大致上的认识. 其中,当使用transferFrom,transferTo的时候用的sendfile(). 如果系统内核不支持 sendfile,进一步执行 transferToTrusted ...
- 关于对 softirq、work_queue、tasklet 学习后的一点总结
本文基于linux版本:4.14.111 简单的总结下 softirq.work_queue.tasklet 三种中断下半部的工作原理及区别,并附上三种形式的简单实例. 一.运行原理① softirq ...
- vue history模式 ios微信分享 踩过的坑
背景:教育项目,整体依赖于微信环境,涉及到微信分享.微信二次分享 问题:vue使用history模式在iso微信下分享设置出错(签名认证错误.分享设置失败) 问题发现路径 1.按照微信公众号官方文档设 ...
- 剑指offer-面试题53_3-数组中数值和下标相等的元素-二分查找
/* 题目: 求单调递增数组中,数值与下标相等的任意数字. */ /* 思路: 二分法. */ #include<iostream> #include<cstring> #in ...
- C++ 与String有关的函数!!!
String函数 1.字符串的输入 (1) string s; cin >> s;//碰到空格等分隔符会终端输入 /* string s; cin >> s;//如果输入 he ...
- WebGL_0004:带贴图的材质透明效果
在材质中: "blendType": 2,