vue.js实现菜单

Vue.js 实现菜单的方法

使用 Vue Router 实现动态菜单

在 Vue.js 中，可以通过 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)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

<!-- Menu.vue -->
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

嵌套菜单实现

对于多级菜单，可以使用嵌套路由：

// router/index.js
{
  path: '/products',
  component: Products,
  children: [
    {
      path: 'list',
      component: ProductList
    },
    {
      path: 'detail/:id',
      component: ProductDetail
    }
  ]
}

动态渲染菜单

从 API 获取菜单数据并动态渲染：

<template>
  <div>
    <div v-for="item in menuItems" :key="item.path">
      <router-link :to="item.path">{{ item.title }}</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: []
    }
  },
  created() {
    this.fetchMenuItems()
  },
  methods: {
    fetchMenuItems() {
      // 假设从API获取菜单数据
      this.menuItems = [
        { path: '/', title: 'Home' },
        { path: '/about', title: 'About' }
      ]
    }
  }
}
</script>

使用 UI 框架实现菜单

使用 Element UI 实现菜单：

<template>
  <el-menu :default-active="activeIndex" mode="horizontal">
    <el-menu-item index="1">Home</el-menu-item>
    <el-submenu index="2">
      <template slot="title">Products</template>
      <el-menu-item index="2-1">List</el-menu-item>
      <el-menu-item index="2-2">Detail</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  }
}
</script>

响应式菜单实现

实现移动端友好的响应式菜单：

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <div v-show="menuVisible">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuVisible: false
    }
  },
  methods: {
    toggleMenu() {
      this.menuVisible = !this.menuVisible
    }
  }
}
</script>

菜单权限控制

根据用户权限显示不同菜单项：

<template>
  <div>
    <router-link v-if="hasPermission('view_home')" to="/">Home</router-link>
    <router-link v-if="hasPermission('view_admin')" to="/admin">Admin</router-link>
  </div>
</template>

<script>
export default {
  methods: {
    hasPermission(permission) {
      // 检查用户权限
      return this.$store.getters.userPermissions.includes(permission)
    }
  }
}
</script>

以上方法涵盖了 Vue.js 中实现菜单的常见场景，可以根据具体需求选择适合的方式或组合使用。