vue实现导航目录

Vue 实现导航目录的方法

基于路由的导航目录

在 Vue 项目中，可以通过 vue-router 实现基于路由的导航目录。首先需要定义路由配置，然后在组件中动态生成导航菜单。

// router/index.js
const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/contact', name: 'Contact', component: Contact }
]

<!-- Navigation.vue -->
<template>
  <nav>
    <ul>
      <li v-for="route in routes" :key="route.path">
        <router-link :to="route.path">{{ route.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      routes: this.$router.options.routes
    }
  }
}
</script>

动态生成多级导航目录

对于多级导航目录，可以递归组件实现。

<!-- NavItem.vue -->
<template>
  <li>
    <router-link v-if="!item.children" :to="item.path">{{ item.name }}</router-link>
    <span v-else>{{ item.name }}</span>
    <ul v-if="item.children">
      <NavItem v-for="child in item.children" :key="child.path" :item="child" />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'NavItem',
  props: ['item']
}
</script>

使用状态管理维护导航状态

对于复杂的导航目录，可以使用 Vuex 管理导航状态。

// store/modules/navigation.js
export default {
  state: {
    menuItems: [
      { name: 'Home', path: '/' },
      { name: 'Products', path: '/products', children: [...] }
    ]
  },
  getters: {
    menuItems: state => state.menuItems
  }
}

<!-- Navigation.vue -->
<template>
  <nav>
    <ul>
      <NavItem v-for="item in menuItems" :key="item.path" :item="item" />
    </ul>
  </nav>
</template>

<script>
import { mapGetters } from 'vuex'
import NavItem from './NavItem.vue'

export default {
  components: { NavItem },
  computed: {
    ...mapGetters(['menuItems'])
  }
}
</script>

响应式导航菜单

可以通过 CSS 和 Vue 的数据绑定实现响应式导航菜单。

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <nav :class="{ 'show': isMenuOpen }">
      <ul>
        <li v-for="item in menuItems" :key="item.path">
          <router-link :to="item.path">{{ item.name }}</router-link>
        </li>
      </ul>
    </nav>
  </div>
</template>

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

<style scoped>
nav {
  display: none;
}
nav.show {
  display: block;
}
</style>

面包屑导航实现

可以通过监听路由变化实现面包屑导航。

<template>
  <div class="breadcrumbs">
    <span v-for="(crumb, index) in crumbs" :key="index">
      <router-link :to="crumb.path">{{ crumb.name }}</router-link>
      <span v-if="index < crumbs.length - 1"> > </span>
    </span>
  </div>
</template>

<script>
export default {
  computed: {
    crumbs() {
      const pathArray = this.$route.path.split('/')
      return pathArray.filter(p => p).map((p, i) => {
        return {
          name: p.charAt(0).toUpperCase() + p.slice(1),
          path: '/' + pathArray.slice(0, i + 1).join('/')
        }
      })
    }
  }
}
</script>

以上方法可以根据项目需求组合使用，实现各种复杂的导航目录功能。