利用vue实现导航

使用 Vue 实现导航

基础导航实现

在 Vue 中实现导航通常可以通过 v-for 指令动态渲染导航项，结合 router-link 实现路由跳转。以下是一个基础示例：

<template>
  <nav>
    <ul>
      <li v-for="item in navItems" :key="item.path">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { name: '首页', path: '/' },
        { name: '关于', path: '/about' },
        { name: '联系', path: '/contact' }
      ]
    }
  }
}
</script>

响应式导航菜单

对于移动端或需要折叠的导航菜单，可以通过 Vue 的响应式数据和条件渲染实现：

<template>
  <nav>
    <button @click="toggleMenu">菜单</button>
    <ul v-show="isMenuOpen">
      <li v-for="item in navItems" :key="item.path">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      isMenuOpen: false,
      navItems: [
        { name: '首页', path: '/' },
        { name: '关于', path: '/about' },
        { name: '联系', path: '/contact' }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen
    }
  }
}
</script>

嵌套路由导航

当需要实现多级导航时，可以结合 Vue Router 的嵌套路由功能：

// router.js
const routes = [
  {
    path: '/products',
    component: Products,
    children: [
      { path: 'laptops', component: Laptops },
      { path: 'phones', component: Phones }
    ]
  }
]

对应的导航组件：

<template>
  <nav>
    <router-link to="/products">产品</router-link>
    <div v-if="$route.path.includes('/products')">
      <router-link to="/products/laptops">笔记本电脑</router-link>
      <router-link to="/products/phones">手机</router-link>
    </div>
  </nav>
</template>

动态高亮当前导航项

通过计算属性和 Vue Router 的 $route 对象可以实现导航项的高亮：

<template>
  <nav>
    <ul>
      <li v-for="item in navItems" :key="item.path" :class="{ active: isActive(item.path) }">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { name: '首页', path: '/' },
        { name: '关于', path: '/about' },
        { name: '联系', path: '/contact' }
      ]
    }
  },
  methods: {
    isActive(path) {
      return this.$route.path === path
    }
  }
}
</script>

<style>
.active {
  background-color: #f0f0f0;
}
</style>

使用 UI 框架实现导航

如果项目中使用 UI 框架如 Element UI，可以简化导航实现：

<template>
  <el-menu :default-active="$route.path" mode="horizontal" router>
    <el-menu-item v-for="item in navItems" :key="item.path" :index="item.path">
      {{ item.name }}
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { name: '首页', path: '/' },
        { name: '关于', path: '/about' },
        { name: '联系', path: '/contact' }
      ]
    }
  }
}
</script>

以上方法涵盖了 Vue 中实现导航的常见场景，从基础实现到高级功能，可以根据项目需求选择合适的方案。