vue3.0实现导航条
使用 Vue 3.0 实现导航条
Vue 3.0 提供了组合式 API 和更灵活的响应式系统，可以高效地实现导航条功能。以下是具体实现方法：
创建导航组件
新建一个 NavBar.vue 组件文件，使用 <template> 定义导航条的结构：
<template>
<nav class="navbar">
<router-link to="/" class="nav-item">首页</router-link>
<router-link to="/about" class="nav-item">关于</router-link>
<router-link to="/contact" class="nav-item">联系我们</router-link>
</nav>
</template>添加样式
在 <style> 标签中为导航条添加基础样式：
<style scoped>
.navbar {
display: flex;
background-color: #2c3e50;
padding: 1rem;
}
.nav-item {
color: white;
margin-right: 1rem;
text-decoration: none;
}
.nav-item:hover {
text-decoration: underline;
}
</style>使用 Vue Router
确保项目已安装 vue-router，并在路由配置文件中定义路径：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router响应式导航条
通过 ref 实现响应式导航状态（如移动端菜单折叠）：
<script setup>
import { ref } from 'vue'
const isMenuOpen = ref(false)
const toggleMenu = () => {
isMenuOpen.value = !isMenuOpen.value
}
</script>
<template>
<button @click="toggleMenu">菜单</button>
<div v-if="isMenuOpen" class="mobile-menu">
<!-- 移动端导航内容 -->
</div>
</template>动态导航项
通过 v-for 渲染动态路由：
<script setup>
const navItems = [
{ path: '/', name: '首页' },
{ path: '/products', name: '产品' }
]
</script>
<template>
<router-link
v-for="item in navItems"
:key="item.path"
:to="item.path"
class="nav-item"
>
{{ item.name }}
</router-link>
</template>高亮当前路由
使用 vue-router 的 useRoute 实现当前路由高亮：
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
const isActive = (path) => route.path === path
</script>
<template>
<router-link
:class="{ 'active': isActive('/about') }"
to="/about"
>
关于
</router-link>
</template>
<style>
.active {
font-weight: bold;
}
</style>
