菜单如何配置带参数的路由，或者说如何将单个后台功能分为两个菜单，并传递不同的参数？- 常见问题整理

路由

需求可以通过配置不同的菜单规则实现，位于：后台->权限管理->菜单规则管理

下面以拆分会员管理为例，我们要做的是将原菜单拆为：一个只路由规则，和两个只菜单规则

只路由规则

如上图，建立一个新的规则，扩展属性设置为只添加为路由，注意它的路由路径使用的语法是vue-router提供的，意思是为路由路径设置一个名为type的params，可以在代码中接受type：

const route = useRoute()
console.log(route.params.type)

请注意，只路由和只菜单的规则都需要设置正确的组件路径，因为系统将过滤掉无组件的规则，同时如果组件路径设置错误，可能导致菜单无法打开

只菜单规则

我们可以添加或者修改原有的菜单规则，参考下图进行设置

• 对于只菜单的规则，规则名称需要不同于只路由规则
• 之前的只路由规则已经设置了参数:type，此时我们设置的路径就需要设置好:type的值，如上图，它是自定义的，通常由开发者到绑定组件内接受和使用

我们还可以添加另外一个:type值不同的菜单：

至此，后台已经可以显示两个菜单，且打开时的路径不相同：

由于路由路径的问题，受权限控制的添加、编辑等按钮不再显示，我们可以为所有菜单分别配置不同的权限节点，还可以直接重写对应index.php的baTable验权方法：

import { auth } from '/@/utils/common'

const baTable = new baTableClass(...)

baTable.auth = (node: string) => {
    return auth({ name: '/admin/user/user/type111' })
}

baTable.mount()
baTable.getIndex()

provide('baTable', baTable)

auth()的具体使用方法请参考文档