Ant design Pro 路由全攻略

8 篇文章 0 订阅
7 篇文章 0 订阅

Ant design Pro 路由全攻略

蚂蚁金服出品的pro后台管理可以说非常优秀了,下文分享我的路由设置攻略

{
      name: 'login',
      path: '/login',
      component: '../layouts/UserLayout',
      routes: [
        {
          path: '/login',
          component: './login/login',
        },
      ],
    },
    {
      path: '/',
      component: '../layouts/BasicLayout',
      Routes: ['src/pages/Authorized'],
      authority: ['admin'],
      routes: [
        {
          path: '/goodsmgm/',
          name: '商品管理',
          icon: 'shop',
          routes: [
            {
              path: '/goodsmgm/Add',
              name: '新增商品',
              component: './goodsmgm/add',
            }
          ]
        },
        {
          path: '/',
          redirect: '/goodsmgm/Add',
          Routes: ['src/pages/Authorized'],
          authority: ['admin'],
        }
      ],
    }
  1. 路由路径设置:采用json数组的格式,主要由path(路径)、name(显示名称)、icon(图标)和component(组件路径)组成。
  2. 顶级路径,如 path:"/"要写在最后,否则前面设置的 “/login” 将无法访问!!
  3. 默认页设置在顶级路径为 "/"的最后,使用redirect跳转到你想要的路径!!
  4. 权限问题:每个页面都要设置权限authority,不设置则任何人都可以访问,当系统判断当前登录者权限不匹配时会跳转到登录或者403,这里不赘述了,后面的文章给大家分享我的权限设置方法!!

最后,这些是我使用react时的经验分享给大家,用以备忘和分享,如有不合理或者可以优化的地方,还请大佬评论区指出O(∩_∩)O哈哈~ QQ:1547164339,不懂的可以加我

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值