vue实现导航菜单

Vue 实现导航菜单的方法

使用 Vue Router 实现基础导航

安装 Vue Router 并配置路由表，通过 <router-link> 组件实现导航跳转。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('../views/About.vue') }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

动态生成导航菜单

通过遍历路由表动态生成导航项，适合多页面的场景。

<template>
  <nav>
    <router-link 
      v-for="route in routes" 
      :key="route.path" 
      :to="route.path"
    >
      {{ route.meta?.title || route.path }}
    </router-link>
  </nav>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const routes = ref(router.getRoutes().filter(r => !r.meta?.hidden))
</script>

响应式侧边栏菜单

结合 Element Plus 或 Ant Design Vue 等 UI 框架实现响应式侧边栏。

<template>
  <el-menu 
    :default-active="activeIndex" 
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1">Home</el-menu-item>
    <el-submenu index="2">
      <template #title>Products</template>
      <el-menu-item index="2-1">Option 1</el-menu-item>
      <el-menu-item index="2-2">Option 2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const handleSelect = (key) => {
  console.log(key)
}
</script>

面包屑导航实现

通过监听路由变化生成面包屑导航，展示当前页面路径。

<template>
  <div class="breadcrumb">
    <span 
      v-for="(item, index) in breadcrumbs" 
      :key="index"
    >
      <router-link 
        v-if="index < breadcrumbs.length - 1" 
        :to="item.path"
      >
        {{ item.meta.title }}
      </router-link>
      <span v-else>{{ item.meta.title }}</span>
      <span v-if="index < breadcrumbs.length - 1"> / </span>
    </span>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const breadcrumbs = computed(() => {
  return route.matched.filter(r => r.meta?.title)
})
</script>

权限控制菜单

根据用户权限动态过滤可访问的菜单项，实现权限控制。

<template>
  <nav>
    <router-link 
      v-for="route in accessibleRoutes" 
      :key="route.path" 
      :to="route.path"
    >
      {{ route.meta.title }}
    </router-link>
  </nav>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const userRoles = ['admin'] // 从store获取实际用户角色

const accessibleRoutes = computed(() => {
  return router.getRoutes().filter(route => {
    const requiredRoles = route.meta?.roles || []
    return requiredRoles.length === 0 || 
           requiredRoles.some(role => userRoles.includes(role))
  })
})
</script>

样式与交互增强

为导航菜单添加过渡动画和活跃状态样式，提升用户体验。

<template>
  <nav>
    <router-link 
      v-for="route in routes" 
      :key="route.path" 
      :to="route.path"
      active-class="active-link"
      exact-active-class="exact-active-link"
    >
      {{ route.meta.title }}
    </router-link>
  </nav>
</template>

<style scoped>
nav {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

.active-link {
  color: #42b983;
  font-weight: bold;
}

.exact-active-link {
  border-bottom: 2px solid #42b983;
}
</style>

以上方法涵盖了从基础到高级的 Vue 导航菜单实现方式，可根据项目需求选择适合的方案或组合使用。