antd-admin icon indicating copy to clipboard operation
antd-admin copied to clipboard

如何在左侧栏新增一个itemMenu,新增一个路由/页面?

Open tombear110 opened this issue 6 years ago • 23 comments

image 如图,想加一个页面加不上去

tombear110 avatar Jul 25 '19 13:07 tombear110

新增页面,参考https://github.com/zuiidea/antd-admin/issues/553 其中路由默认按目录结构来(route.js可以不用管),service统一抽象到了src/services/api下

superlbr avatar Jul 25 '19 14:07 superlbr

大佬,那是2017年的笔记,现在2019了,步骤里面的文件基本找不到了.

tombear110 avatar Jul 25 '19 14:07 tombear110

是啊,有可能文件名也变了呢,你能试着找找,然后把步骤贴出来吗

superlbr avatar Jul 25 '19 15:07 superlbr

尝试过了,实在搞不清楚怎么个步骤和逻辑的,才会提问的啊。

tombear110 avatar Jul 26 '19 00:07 tombear110

已知信息:1貌似采用了umi约定式路由,但是在page中添加页面无效;2尝试修改左侧栏一个文字,先改动mock/route中文字,然后把page/.umi文件删除重新run项目,才能改动,太不合理了

tombear110 avatar Jul 26 '19 00:07 tombear110

但是在page中添加页面无效

并不是无效,而是受mock/route约束。多尝试,一来加深理解,二才有成就感

superlbr avatar Jul 26 '19 01:07 superlbr

3步:

  1. 修改mock/route.js. 明确添加页面的信息(层级关系,名称,路径,语言)
  2. 复制比如user页面文件夹(注意里面[id]文件夹是另一个页面)到pages下,构成umi约定路由
  3. 修改文件夹中的model.js,更正namespace和pathname
  4. (可选)在services/api下,更新接口
  5. (可选)在mock/user.js里,调整userPermission

superlbr avatar Jul 27 '19 03:07 superlbr

正确步骤:

  1. 修改mock/route.js. 明确添加页面的信息(层级关系,名称,路径,语言);
  2. 复制比如user页面文件夹到pages下,构成umi约定路由;
  3. 修改文件夹中的model.js,更正namespace(没有pathname这个字段);
  4. 在mock/user.js里,调整userPermission(这个文件时控制登录用户的权限,userPermission)
  5. 删除pages/.umi文件,重新run项目,重新登陆一下;

有个疑问,为什么要每次删掉这个.umi文件才生效?用过antd-design-pro,同样是采用dva+umi,并不需要这样啊

tombear110 avatar Jul 27 '19 04:07 tombear110

并不需要删,是重新run起作用吧

superlbr avatar Jul 27 '19 04:07 superlbr

开出来,方便别人看到

superlbr avatar Jul 27 '19 10:07 superlbr

并不需要删,是重新run起作用吧 是的,不需要删除,重新run,重新登陆即可

tombear110 avatar Jul 28 '19 02:07 tombear110

谢谢详细解答👍

tombear110 avatar Jul 28 '19 02:07 tombear110

正确步骤:

  1. 修改mock/route.js. 明确添加页面的信息(层级关系,名称,路径,语言);
  2. 复制比如user页面文件夹到pages下,构成umi约定路由;
  3. 修改文件夹中的model.js,更正namespace(没有pathname这个字段);
  4. 在mock/user.js里,调整userPermission(这个文件时控制登录用户的权限,userPermission)
  5. 删除pages/.umi文件,重新run项目,重新登陆一下;

有个疑问,为什么要每次删掉这个.umi文件才生效?用过antd-design-pro,同样是采用dva+umi,并不需要这样啊

加一个第6步,需要回到登录页,从新登陆一下,才能看到更新。

windcanvas avatar Jul 28 '19 09:07 windcanvas

页面是添加成功了,但是页面中的所有请求全部不生效 ,请求不发送只是在地址栏更改参数。

ivsass avatar Nov 01 '19 01:11 ivsass

@ivsass 注意models里的限制,pathMatchRegexp是不是没有跟随页面路径更新

 subscriptions: {
    setup({ dispatch, history }) {
      history.listen(location => {
        if (pathMatchRegexp('/user', location.pathname)) {

superlbr avatar Nov 01 '19 07:11 superlbr

image 怎么按照这个步骤操作不行的尼??连之前的页面也进不去了

atonesapple avatar Sep 10 '20 07:09 atonesapple

控制台有没有报错呀 @atonesapple

superlbr avatar Sep 10 '20 09:09 superlbr

image 控制台一直报这个错也

atonesapple avatar Sep 10 '20 09:09 atonesapple

@atonesapple 注意步骤三,model.js里的namespace全局唯一噢

superlbr avatar Sep 10 '20 09:09 superlbr

搜索namespace 也是唯一的 image 然后下面的时候我操作步骤,看看是不是错了 image

atonesapple avatar Sep 10 '20 09:09 atonesapple

搜索namespace 也是唯一的

@atonesapple 请再检查一遍

superlbr avatar Sep 10 '20 09:09 superlbr

@atonesapple 为什么盯着demo看呢,user文件夹是几个页面?userDetail重不重复!!!

superlbr avatar Sep 10 '20 09:09 superlbr

@superlbr谢谢指导,页面效果出来了,是第三步搞错了,不知道namespace的唯一性,再次感谢!!!

atonesapple avatar Sep 10 '20 09:09 atonesapple