vue实现导航栏切图
Vue 实现导航栏切图的步骤
安装 Vue 和相关依赖
确保已安装 Vue.js，推荐使用 Vue CLI 创建项目。若需响应式设计，可安装 Bootstrap 或 Tailwind CSS。
npm install -g @vue/cli
vue create my-project
cd my-project
npm install bootstrap创建导航栏组件
在 src/components 目录下创建 Navbar.vue 文件，定义导航栏的结构和样式。
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<router-link class="nav-link" to="/">Home</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/about">About</router-link>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
name: 'Navbar'
}
</script>
<style scoped>
.navbar {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>配置路由
在 src/router/index.js 中配置路由，确保导航栏的链接能正确跳转。
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router引入全局样式
在 src/main.js 中引入 Bootstrap 的 CSS 文件，确保样式生效。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
createApp(App).use(router).mount('#app')响应式设计优化
使用媒体查询或 Bootstrap 的栅格系统，确保导航栏在不同设备上显示正常。例如，折叠菜单在移动设备上自动隐藏。
@media (max-width: 768px) {
.navbar-collapse {
background-color: #f8f9fa;
}
}动态导航栏
通过 Vue 的 v-for 动态生成导航项，便于维护和扩展。
<script>
export default {
data() {
return {
navItems: [
{ path: '/', name: 'Home' },
{ path: '/about', name: 'About' }
]
}
}
}
</script>
<template>
<ul class="navbar-nav">
<li class="nav-item" v-for="item in navItems" :key="item.name">
<router-link class="nav-link" :to="item.path">{{ item.name }}</router-link>
</li>
</ul>
</template>交互效果增强
添加鼠标悬停效果或激活状态高亮，提升用户体验。
.nav-link:hover {
color: #007bff;
}
.router-link-exact-active {
font-weight: bold;
}
