vue实现导航栏教程
Vue 实现导航栏的基础方法
安装 Vue 和 Vue Router
通过 npm 或 yarn 安装 Vue 和 Vue Router。Vue Router 是 Vue.js 官方的路由管理器，适合构建单页面应用（SPA）的导航系统。
npm install vue-router创建路由配置文件
在项目中新建一个 router.js 或 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;导航栏组件的实现
创建导航栏组件
在 components 目录下新建 NavBar.vue 文件，使用 <router-link> 实现导航链接。
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
</template>
<style scoped>
nav {
padding: 1rem;
background: #f0f0f0;
}
router-link {
margin-right: 1rem;
}
</style>在主应用中引入路由和导航栏
在 App.vue 中导入路由配置和导航栏组件，并通过 <router-view> 显示当前路由对应的内容。
<template>
<NavBar />
<router-view />
</template>
<script>
import NavBar from './components/NavBar.vue';
export default {
components: { NavBar }
};
</script>动态高亮当前导航项
使用 Vue Router 的 route 对象
通过 router-link 的 active-class 属性或计算当前路由路径，实现导航项的高亮效果。
<template>
<nav>
<router-link
to="/"
:class="{ active: $route.path === '/' }"
>Home</router-link>
<router-link
to="/about"
:class="{ active: $route.path === '/about' }"
>About</router-link>
</nav>
</template>
<style scoped>
.active {
font-weight: bold;
color: #42b983;
}
</style>响应式导航栏的实现
使用 Vue 的响应式数据和事件
通过 v-if 或 v-show 控制移动端菜单的显示与隐藏，结合 CSS 媒体查询实现响应式布局。
<template>
<nav>
<button @click="toggleMenu">Toggle Menu</button>
<div v-show="isMenuOpen" class="menu">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
</nav>
</template>
<script>
export default {
data() {
return {
isMenuOpen: false
};
},
methods: {
toggleMenu() {
this.isMenuOpen = !this.isMenuOpen;
}
}
};
</script>
<style scoped>
.menu {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
button { display: none; }
.menu { flex-direction: row; }
}
</style>嵌套路由的导航栏
配置嵌套路由
在路由配置中定义子路由，适用于具有多层结构的导航栏（如带有下拉菜单的导航项）。
const routes = [
{
path: '/products',
component: Products,
children: [
{ path: 'list', component: ProductList },
{ path: 'detail/:id', component: ProductDetail }
]
}
];在导航组件中使用嵌套路由
通过 <router-link> 指向子路由路径，注意路径的拼接方式。
<router-link to="/products/list">Product List</router-link>
<router-link to="/products/detail/1">Product Detail</router-link>
