1. 怎么固定左边的导航栏
精华 :
npm地址 : ant-design/pro-layout
github地址 api文档
注意点 : 设置了fixedHeader = {true} fixSiderbar = {true} 没有作用,原因可能是{...props} {...settings} 内定义的属性覆盖了,所以写在{...props} {...settings} 只有就可以.
{...props}
{...settings}
// 之所以写在下面是为了防止{...settings}里面的属性又覆盖了下面 fixedHeader fixSiderbar
fixedHeader = {true}
fixSiderbar = {true}
分析/解决问题/授人以鱼不如授人以渔
第一步首先定位到那一块是左侧导航栏的代码?
定位到 : zhushang_b/src/layouts/BasicLayout.tsx
具体定位到的代码
<ProLayout
logo={imglogo}
menuHeaderRender={(logoDom, titleDom) => (
<Link to="/">
{logoDom}
{titleDom}
</Link>
)}
onCollapse={handleMenuCollapse}
menuItemRender={(menuItemProps, defaultDom) => {
if (
menuItemProps.isUrl ||
menuItemProps.children ||
!menuItemProps.path
) {
return defaultDom;
}
return <Link to={menuItemProps.path}>{defaultDom}</Link>;
}}
breadcrumbRender={(routers = []) => [
{
path: "/",
breadcrumbName: formatMessage({
id: "menu.home",
defaultMessage: "Home"
})
},
...routers
]}
itemRender={(route, params, routes, paths) => {
const first = routes.indexOf(route) === 0;
return first ? (
<Link to={paths.join("/")}>{route.breadcrumbName}</Link>
) : (
<span>{route.breadcrumbName}</span>
);
}}
footerRender={footerRender}
menuDataRender={menuDataRender}
formatMessage={formatMessage}
rightContentRender={() => <RightContent />}
{...props}
{...settings}
// 之所以写在下面是为了防止{...settings}里面的属性又覆盖了下面 fixedHeader fixSiderbar
fixedHeader = {true}
fixSiderbar = {true}
>
<Authorized authority={authorized!.authority} noMatch={noMatch}>
{children}
</Authorized>
</ProLayout>
第二步分析代码,切记不要不去思考直接改. 因为既然框架给你了,很大可能会有相应的设计,毕竟这个算刚需吧!
然后我分析到这个菜单栏可以定义属性,但是这些属性肯定是人家自带的. 所以我们要去找它的api! 看ProLayout从哪里导入进来的如下
import ProLayout, {
MenuDataItem,
BasicLayoutProps as ProLayoutProps,
Settings,
DefaultFooter
} from "@ant-design/pro-layout";
继续分析,发现ProLayout是来自 ant-design/pro-layout, 那么接下来就找开源的ant-design/pro-layout文档. google搜索 ant-design/pro-layout
于是找到了ant-design/pro-layout
发现了新大陆API!!!
哇,都是英文阿,我在想这个肯定是阿里维护的阿,怎能没中文api!!于是到github地址去看看
问题解决 >> api文档
2.二级导航
// {
// path: "/zhangbin/demo",
// name: "zhangbin",
// icon: "crown",
// routes: [
// {
// path: "/zhangbin/demo",
// name: "zhangbin",
// component: "./zhangbin/demo"
// },
// {
// path: "/zhangbin/demo",
// name: "zhangbin",
// component: "./zhangbin/demo"
// }
// ]
// },
整个例子
routes: [
{
path: '/',
component: '../layouts/BasicLayout',
authority: ['admin', 'user'],
routes: [
{
path: '/',
redirect: '/user/login',
},
{
path: '/task-center/index',
name: 'task-center',
icon: 'unordered-list',
component: './task-center/index',
},
// 不要删除,以后做二级联动直接是个例子 -faith
// {
// path: "/zhangbin/demo",
// name: "zhangbin",
// icon: "crown",
// routes: [
// {
// path: "/zhangbin/demo",
// name: "zhangbin",
// component: "./zhangbin/demo"
// },
// {
// path: "/zhangbin/demo",
// name: "zhangbin",
// component: "./zhangbin/demo"
// }
// ]
// },
{
path: '/taskDetails/taskDetails',
component: './taskDetails/taskDetails',
},
{
path: '/settlement-center/index',
name: 'settlement-center',
icon: 'account-book',
component: './settlement-center/index',
},
{
path: '/personnel-management/index',
name: 'personnel-management',
icon: 'team',
component: './personnel-management/index',
},
{
path: '/userRouter/userRouter',
name: 'user-center',
icon: 'user',
component: './userRouter/userRouter', //路由守卫,用户注册了就跳转到信息页面, 否则跳转到注册页面
// Routes: ['./routes/PriviteRoute.js'],
},
{
path: '/userInfo/userInfo',
component: './userInfo/userInfo',
},
{
path: '/user-center/index',
component: './user-center/index',
},
{
path: '/createTask/createTask',
component: './createTask/createTask',
},
{
path: '/createTaskSuccess/createTaskSuccess',
component: './createTaskSuccess/createTaskSuccess',
},
{
path: '/settlement-center/settleList/index',
component: './settlement-center/settleList/index',
},
{
path: '/settlement-center/settleDetail/index',
component: './settlement-center/settleDetail/index',
},
{
component: './404',
},
],
},
{
component: './404',
},
],