vue3.0实现导航条

实现导航条的基本结构

在Vue 3.0中，导航条通常通过组合式API和<template>模板实现。创建一个基础导航条需要定义路由链接和样式结构。以下是一个基于Vue Router的导航条示例：

<template>
  <nav class="navbar">
    <router-link to="/" class="nav-item">Home</router-link>
    <router-link to="/about" class="nav-item">About</router-link>
    <router-link to="/contact" class="nav-item">Contact</router-link>
  </nav>
</template>

<script setup>
// 无需逻辑时可省略script部分
</script>

<style scoped>
.navbar {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background-color: #f0f0f0;
}
.nav-item {
  text-decoration: none;
  color: #333;
}
.nav-item.router-link-active {
  font-weight: bold;
}
</style>

动态渲染导航菜单

通过响应式数据动态生成导航项更灵活。使用ref或reactive定义菜单数据：

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

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

const navItems = ref([
  { path: '/', name: 'Home' },
  { path: '/about', name: 'About' },
  { path: '/products', name: 'Products' }
]);
</script>

响应式导航条（移动端适配）

添加汉堡菜单和媒体查询实现响应式效果：

<template>
  <nav class="navbar">
    <div class="menu-toggle" @click="toggleMenu">☰</div>
    <div class="nav-links" :class="{ 'active': isMenuOpen }">
      <router-link 
        v-for="item in navItems" 
        :key="item.path" 
        :to="item.path"
        @click="closeMenu"
      >
        {{ item.name }}
      </router-link>
    </div>
  </nav>
</template>

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

const isMenuOpen = ref(false);
const toggleMenu = () => isMenuOpen.value = !isMenuOpen.value;
const closeMenu = () => isMenuOpen.value = false;
</script>

<style scoped>
.navbar {
  display: flex;
  flex-direction: column;
}
.menu-toggle {
  display: none;
  cursor: pointer;
}
.nav-links {
  display: flex;
  gap: 1rem;
}
@media (max-width: 768px) {
  .menu-toggle { display: block; }
  .nav-links {
    flex-direction: column;
    display: none;
  }
  .nav-links.active { display: flex; }
}
</style>

嵌套路由导航

处理多级导航菜单时，可结合递归组件或嵌套路由：

<template>
  <nav>
    <router-link 
      v-for="item in navItems" 
      :key="item.path" 
      :to="item.path"
    >
      {{ item.name }}
      <div v-if="item.children" class="submenu">
        <router-link 
          v-for="child in item.children" 
          :key="child.path" 
          :to="child.path"
        >
          {{ child.name }}
        </router-link>
      </div>
    </router-link>
  </nav>
</template>

<script setup>
const navItems = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    children: [
      { path: '/dashboard/profile', name: 'Profile' }
    ]
  }
];
</script>

状态高亮与权限控制

结合Pinia或Vuex管理导航状态，实现权限过滤：

<template>
  <nav>
    <router-link 
      v-for="item in filteredNavItems" 
      :key="item.path" 
      :to="item.path"
      :class="{ 'disabled': !item.visible }"
    >
      {{ item.name }}
    </router-link>
  </nav>
</template>

<script setup>
import { useAuthStore } from '@/stores/auth';
import { computed } from 'vue';

const auth = useAuthStore();
const navItems = [
  { path: '/admin', name: 'Admin', role: 'admin' }
];
const filteredNavItems = computed(() => 
  navItems.filter(item => !item.role || auth.hasRole(item.role))
);
</script>