动态获取路由列表菜单: 赋能个性化导航体验

前端

2023-09-04 11:20:55

动态路由列表菜单：提升用户体验的有效策略

在构建用户界面时，导航菜单是用户与应用程序交互的关键部分。通过提供清晰且直观的菜单，我们可以帮助用户轻松找到所需的功能并提高他们的整体体验。然而，传统的静态菜单并不能总是满足用户的特定需求，而动态路由列表菜单恰好填补了这一空白。

什么是动态路由列表菜单？

动态路由列表菜单是根据用户角色、权限和个性化设置自动生成的导航菜单。通过将路由列表数据与后端分离，我们可以动态更新菜单以反映用户当前的状态。这提供了比静态菜单更个性化和灵活的导航体验。

动态路由列表菜单的优点

增强个性化： 动态菜单可以根据每个用户的具体需求进行定制，从而提供更加符合其偏好的导航体验。
提高效率： 通过将菜单与用户的具体情况相匹配，用户可以快速找到所需的功能和信息，从而提高工作效率。
简化维护： 将路由列表数据与前端代码分离可以简化维护和更新，降低维护成本。

如何实现动态路由列表菜单

在antd_pro2框架中，我们可以通过以下步骤实现动态路由列表菜单：

1. 获取路由列表数据

import { request } from 'umi';

export async function getMenuList() {
  return request('/api/menu', {
    method: 'GET',
  });
}

2. 在布局组件中处理数据

import { useEffect, useState } from 'react';
import { Menu } from 'antd';
import { getMenuList } from '../models/menu';

const BasicLayout = (props) => {
  const [menuList, setMenuList] = useState([]);

  useEffect(() => {
    getMenuList().then(response => {
      setMenuList(response.data);
    });
  }, []);

  return (
    <Layout>
      <Sider width={200}>
        <Menu mode="inline" theme="dark">
          {menuList.map(item => (
            <Menu.Item key={item.key} icon={item.icon}>
              <Link to={item.path}>{item.name}</Link>
            </Menu.Item>
          ))}
        </Menu>
      </Sider>
      <Layout>
        <Content>{props.children}</Content>
      </Layout>
    </Layout>
  );
};

export default BasicLayout;