若依框架的菜单管理中增加详情页

Ruoyi 框架生成代码时，各种数据操作都放在一个 dialog 弹出框中，而且只有编辑，没有查看……这很不方便。很多时候我们需要个详情页（只读），对于复杂实体在新建时，那个dialog中的表单也实在是有点过于粗糙了。

但是！是的，总是要说但是的。如果人家都给你做了，要你干嘛呢？框架框架就是个架子嘛。

经过反复研究，终于搞明白若依的菜单管理是如何对应路由的了！！！！！

因为代码生成已经建好了列表页，只需要建立相关的其他页面就好，比如新增，详情什么的。以高校管理为例。

1 新建详情页菜单

需要与列表页同级（下级好像我没测出来）。

级别	类型	菜单名称	显示状态	路径（path）	组件（component）	权限
一级	目录	信息管理	显示	info
二级	菜单	高校列表	显示	university	crm-info/university/index	crm-info:university:list
二级	菜单	高校详情	隐藏	university/:universityId	crm-info/university/detail	crm-info:university:list

这样，实际访问的路径是：

• 列表页：

  /info/university

• 详情页：

  /info/university/:universityId

配好菜单后，可以先不隐藏，这样可以直接点击看路由是否可行，也可以在地址栏看到真实路径，以便调整修改。

2 修改列表页

修改列表页，增加详情按钮和跳转功能

（1）页面 template 部分

<table>
  <el-table-column>
    <template slot-scope="scope">
      <!-- 详情按钮 -->
      <el-button @click="handleShowDetail(scope.row)">
        详情
      </el-button>
    </template>
  </el-table-column>
</table>
           

（2）Script 中的 methods 部分

/** 详情按钮操作 */
handleShowDetail(row) {
  const loc = "/info/university/" + row.universityId
  this.$router.push(loc)
}
           

$router.push(location)

中的参数

location

在源码中可以看到是

String

类型。而且这里是全路径，所以一定要从根路径开始写！！

3 增加详情页

按照前面菜单设定好的路径创建详情页，重点是接收路由中的参数。

created() {
  const universityId = this.$route.params.universityId
  console.log(universityId)
  // 业务处理
},
           

总结

1. 根据这个思路，可以灵活搭建各种菜单、功能了。
2. 实际上如果你不用代码生成，两个页面都自己写也一样的。加油吧~~