vue路由菜单怎么实现

Vue 路由菜单的实现方法

在 Vue 项目中，可以通过 Vue Router 结合动态菜单数据来实现路由菜单。以下是一种常见的实现方式：

安装 Vue Router

npm install vue-router

配置路由

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '首页',
      icon: 'el-icon-house'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      title: '关于',
      icon: 'el-icon-info'
    }
  }
]

const router = new Router({
  routes
})

export default router

创建菜单组件

<!-- components/Menu.vue -->
<template>
  <div class="menu">
    <el-menu
      :default-active="$route.path"
      router
      mode="horizontal"
    >
      <el-menu-item
        v-for="route in menuRoutes"
        :key="route.path"
        :index="route.path"
      >
        <i :class="route.meta.icon"></i>
        <span>{{ route.meta.title }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  computed: {
    menuRoutes() {
      return this.$router.options.routes.filter(route => route.meta)
    }
  }
}
</script>

在主应用中使用菜单

<!-- App.vue -->
<template>
  <div id="app">
    <Menu />
    <router-view/>
  </div>
</template>

<script>
import Menu from './components/Menu.vue'

export default {
  components: {
    Menu
  }
}
</script>

动态菜单的实现

对于需要从后端获取菜单数据的场景：

修改菜单组件

<!-- components/DynamicMenu.vue -->
<template>
  <div class="menu">
    <el-menu
      :default-active="$route.path"
      router
    >
      <template v-for="item in menuData">
        <el-submenu
          v-if="item.children"
          :key="item.path"
          :index="item.path"
        >
          <template slot="title">
            <i :class="item.meta.icon"></i>
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item
            v-for="child in item.children"
            :key="child.path"
            :index="child.path"
          >
            {{ child.meta.title }}
          </el-menu-item>
        </el-submenu>
        <el-menu-item
          v-else
          :key="item.path"
          :index="item.path"
        >
          <i :class="item.meta.icon"></i>
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuData: []
    }
  },
  async created() {
    const response = await fetch('/api/menus')
    this.menuData = await response.json()
  }
}
</script>

权限控制菜单

可以通过路由守卫和菜单过滤实现权限控制：

添加路由守卫

// router/index.js
router.beforeEach((to, from, next) => {
  const hasPermission = checkPermission(to)
  if (!hasPermission) {
    next('/403')
  } else {
    next()
  }
})

function checkPermission(route) {
  // 实现权限检查逻辑
  return true
}

过滤菜单数据

// 在菜单组件中
computed: {
  filteredMenu() {
    return this.menuData.filter(item => {
      return this.$store.state.user.roles.some(role => 
        item.meta.roles.includes(role)
      )
    })
  }
}

多级菜单的实现

对于复杂的多级菜单结构：

// 路由配置示例
{
  path: '/system',
  name: 'System',
  meta: {
    title: '系统管理',
    icon: 'el-icon-setting'
  },
  children: [
    {
      path: 'user',
      name: 'User',
      component: User,
      meta: {
        title: '用户管理'
      }
    },
    {
      path: 'role',
      name: 'Role',
      component: Role,
      meta: {
        title: '角色管理'
      }
    }
  ]
}

以上方法提供了从基础到高级的 Vue 路由菜单实现方案，可以根据项目需求选择适合的方式。