根据路由动态渲染菜单栏

根据路由文件index.ts中的路由来动态渲染首页菜单栏，一个路由对应一个菜单

环境：Arco design Vue + Vue3 + Vue Router

版本：

{
    "vue": "^3.4.29",
    "vue-router": "^4.3.3",
    "@arco-design/web-vue": "^2.55.3"
}

步骤：

引入@/router/index.ts

import routers from '@/router/index'

在菜单栏的中，对菜单项进行v-for循环遍历routers中的路由

<a-menu-item v-for="item in routers.getRoutes()" :key="item.path"
  >{{ item.name }}
</a-menu-item>

其他：

index.ts文件中的routes是在router下面，但是不能通过router.routes来访问路由数组，需要使用router.getRoutes()来访问其中的路由数组，进而遍历渲染

根据权限过滤菜单栏

过滤掉应该被隐藏/无权限的菜单/路由

方法一

前提：在router/index.ts文件中，定义meta中access为权限，hidden为是否隐藏

在全局状态管理permission.ts中定义过滤菜单栏的函数

function generateRoutes(roles: string[]) {
  const accessedRoutes: Array<any> = []
  for (const route of router.getRoutes()) {
    //路由中没有设置 access 的，没有设置 hidden 的，以及 hidden 是false的，加入可访问路由
    if (!route.meta.access && (!route.meta.hidden || route.meta.hidden === false)) {
      accessedRoutes.push(route)
    } else {
      //如果路由中有设置 access 的，且角色 roles 中包含此 access，那么加入可访问路由
      if (roles.includes(route.meta.access)) {
        accessedRoutes.push(route)
      }
    }
  }
  routes.value = accessedRoutes
  console.log('刷新权限：', routes.value)
  return accessedRoutes
}

登录成功后调用generateRoutes，在该展示菜单栏的地方，直接获取routes即可

方法二

直接在菜单栏组件中，script部分

步骤：

先从userStore中取出登录用户的roles
判断roles的权限菜单

  
//登录成功后，从store中取出登录用户的角色信息
const userStore = useLoginUserStore()
const roles = userStore.roles

const menu:string[] = ref([])

//挂载时赋值
onMounted(()) => {
    const menu = generateRoutes()
}

function generateRoutes() {
    const accessedRoutes: Array<any> = []
    for (const route of router.getRoutes()) {
      //路由中没有设置 access 的，没有设置 hidden 的，以及 hidden 是false的，加入可访问路由
      if (!route.meta.access && (!route.meta.hidden || route.meta.hidden === false)) {
        accessedRoutes.push(route)
      } else {
        //如果路由中有设置 access 的，且角色 roles 中包含此 access，那么加入可访问路由
        if (roles.includes(route.meta.access)) {
          accessedRoutes.push(route)
        }
      }
    }
    routes.value = accessedRoutes
    console.log('刷新权限：', routes.value)
    return accessedRoutes
  }