当前位置：首页 > VUE

vue实现动态导航栏

2026-01-21 19:19:44VUE

Vue 实现动态导航栏的方法

基于路由配置动态生成

在 Vue 项目中，可以利用路由配置动态生成导航栏。Vue Router 的路由信息可以通过 this.$router.options.routes 或 useRouter() 获取。

// router/index.js
const routes = [
  { path: '/', name: 'Home', meta: { title: '首页' } },
  { path: '/about', name: 'About', meta: { title: '关于' } }
]

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

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

通过 API 动态获取导航数据

导航数据也可以从后端 API 动态获取，适合权限控制的场景。

// 假设 API 返回格式: [{ path: '/', title: '首页' }, ...]
async function fetchNavItems() {
  const response = await axios.get('/api/navigation')
  return response.data
}

<script>
export default {
  data() {
    return {
      navItems: []
    }
  },
  async created() {
    this.navItems = await fetchNavItems()
  }
}
</script>

结合 Vuex/Pinia 状态管理

对于复杂的导航状态管理，可以使用状态管理工具存储导航数据。

// store/modules/navigation.js
export default {
  state: () => ({
    items: []
  }),
  actions: {
    async loadNavItems({ commit }) {
      const items = await fetchNavItems()
      commit('SET_ITEMS', items)
    }
  }
}

响应式导航栏实现

实现响应式导航栏需要结合 CSS 媒体查询和 Vue 的状态控制。

<template>
  <button @click="toggleMobileNav">菜单</button>
  <nav :class="{ 'mobile-active': mobileNavOpen }">
    <!-- 导航项 -->
  </nav>
</template>

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

<style>
@media (max-width: 768px) {
  nav:not(.mobile-active) {
    display: none;
  }
}
</style>

动态高亮当前路由

使用 Vue Router 的 router-link-active 类或自定义逻辑实现高亮效果。

<template>
  <router-link
    v-for="item in navItems"
    :key="item.path"
    :to="item.path"
    :class="{ 'active': $route.path === item.path }"
  >
    {{ item.title }}
  </router-link>
</template>

<style>
.active {
  font-weight: bold;
  color: #42b983;
}
</style>

权限控制实现

根据用户角色过滤导航项，实现权限控制。

// 过滤函数示例
function filterByPermission(items, userRole) {
  return items.filter(item => {
    return !item.meta?.roles || item.meta.roles.includes(userRole)
  })
}

<script>
export default {
  computed: {
    allowedNavItems() {
      return filterByPermission(this.navItems, this.$store.state.user.role)
    }
  }
}
</script>

以上方法可以单独使用或组合使用，根据项目需求选择最适合的实现方式。动态导航栏的核心是将导航数据与界面分离，通过数据驱动视图变化。

vue实现动态导航栏