vue实现菜单路由

vue实现菜单路由的方法

使用Vue实现菜单路由通常需要结合Vue Router和动态路由配置。以下是常见的实现方式：

基于路由配置生成菜单

在Vue项目中定义一个路由配置文件，包含所有可能的菜单项和路由信息：

// router/index.js
const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: {
      title: '控制台',
      icon: 'el-icon-menu'
    }
  },
  {
    path: '/user',
    name: 'User',
    component: () => import('@/views/User.vue'),
    meta: {
      title: '用户管理',
      icon: 'el-icon-user'
    }
  }
]

动态渲染菜单组件

在侧边栏或导航组件中，遍历路由配置生成菜单：

<template>
  <el-menu :default-active="$route.path" router>
    <template v-for="route in $router.options.routes">
      <el-menu-item 
        v-if="!route.children" 
        :index="route.path" 
        :key="route.path"
      >
        <i :class="route.meta.icon"></i>
        <span>{{ route.meta.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

处理嵌套路由菜单

对于多级菜单，可以使用递归组件或嵌套路由配置：

// 嵌套路由配置
{
  path: '/system',
  name: 'System',
  component: Layout,
  meta: {
    title: '系统管理',
    icon: 'el-icon-setting'
  },
  children: [
    {
      path: 'role',
      component: () => import('@/views/system/Role.vue'),
      meta: {
        title: '角色管理'
      }
    }
  ]
}

基于权限过滤菜单

根据用户权限动态过滤可访问的菜单项：

// 在路由守卫或全局方法中
function filterRoutes(routes, roles) {
  return routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return roles.some(role => route.meta.roles.includes(role))
    }
    return true
  })
}

保持菜单状态

使用Vuex或Pinia存储当前激活的菜单状态：

// store/modules/app.js
const state = {
  sidebar: {
    opened: true,
    activeMenu: ''
  }
}

const mutations = {
  TOGGLE_SIDEBAR(state) {
    state.sidebar.opened = !state.sidebar.opened
  },
  SET_ACTIVE_MENU(state, path) {
    state.sidebar.activeMenu = path
  }
}

响应式菜单设计

结合CSS媒体查询实现响应式菜单：

@media screen and (max-width: 768px) {
  .el-menu--collapse {
    width: 64px;
  }
}

这些方法可以根据实际项目需求组合使用，构建完整的菜单路由系统。