当前位置：首页 > VUE

vue实现动态导航

2026-01-17 09:08:14VUE

Vue 实现动态导航的方法

动态导航通常指根据用户权限、数据变化或交互行为实时更新的导航菜单。以下是几种常见实现方式：

基于路由配置的动态导航

通过 Vue Router 的路由配置生成导航菜单，适合需要根据权限动态显示菜单的场景。

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

// 导航组件
<template>
  <nav>
    <router-link 
      v-for="route in filteredRoutes" 
      :key="route.path" 
      :to="route.path"
    >
      {{ route.meta.title }}
    </router-link>
  </nav>
</template>

<script>
export default {
  computed: {
    filteredRoutes() {
      return this.$router.options.routes.filter(route => {
        return !route.meta.auth || this.$store.state.isAuthenticated
      })
    }
  }
}
</script>

基于 API 数据的动态导航

从后端获取导航数据，适合内容频繁变化的场景。

<template>
  <ul>
    <li v-for="item in navItems" :key="item.id">
      <a :href="item.url">{{ item.title }}</a>
    </li>
  </ul>
</template>

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

基于 Vuex 的状态管理

当导航需要跨组件共享状态时，使用 Vuex 集中管理导航数据。

// store.js
export default new Vuex.Store({
  state: {
    navItems: []
  },
  mutations: {
    SET_NAV_ITEMS(state, items) {
      state.navItems = items
    }
  },
  actions: {
    async fetchNavItems({ commit }) {
      const res = await api.getNavItems()
      commit('SET_NAV_ITEMS', res.data)
    }
  }
})

// 组件中使用
<template>
  <div v-for="item in $store.state.navItems" :key="item.id">
    {{ item.name }}
  </div>
</template>

响应式导航菜单

实现可折叠、可拖拽等交互效果的动态导航。

<template>
  <div>
    <button @click="isOpen = !isOpen">Toggle Menu</button>
    <ul v-show="isOpen">
      <li v-for="item in items" :key="item.id">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' }
      ]
    }
  }
}
</script>

权限控制的动态导航

结合角色或权限系统实现导航项的动态显示。

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

<script>
export default {
  computed: {
    visibleItems() {
      return this.allItems.filter(item => {
        return this.$store.getters.hasPermission(item.requiredPermission)
      })
    }
  }
}
</script>