vue导航栏实现
实现Vue导航栏的基本方法
使用Vue Router创建基础导航结构，在项目中安装vue-router后，通过router-link组件实现页面跳转。
<template>
<nav>
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
</nav>
</template>动态导航菜单实现
通过v-for循环渲染导航项，结合路由配置实现动态生成菜单。
<template>
<nav>
<router-link
v-for="item in menuItems"
:key="item.path"
:to="item.path"
>
{{ item.title }}
</router-link>
</nav>
</template>
<script>
export default {
data() {
return {
menuItems: [
{ path: '/', title: '首页' },
{ path: '/about', title: '关于我们' }
]
}
}
}
</script>响应式导航栏设计
结合CSS媒体查询和Vue的状态管理，实现移动端友好的响应式导航。
<template>
<div class="navbar">
<div class="logo">Brand</div>
<div
class="menu-toggle"
@click="toggleMenu"
>
☰
</div>
<div
class="nav-links"
:class="{ 'active': isMenuOpen }"
>
<router-link to="/">首页</router-link>
<router-link to="/products">产品</router-link>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isMenuOpen: false
}
},
methods: {
toggleMenu() {
this.isMenuOpen = !this.isMenuOpen
}
}
}
</script>
<style>
@media (max-width: 768px) {
.nav-links {
display: none;
}
.nav-links.active {
display: flex;
flex-direction: column;
}
}
</style>导航栏权限控制
结合Vuex和路由守卫，实现基于用户角色的导航显示控制。
<template>
<nav>
<router-link to="/">首页</router-link>
<router-link
v-if="user.isAdmin"
to="/admin"
>
管理面板
</router-link>
</nav>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['user'])
}
}
</script>导航栏激活状态样式
利用router-link-active类或精确匹配router-link-exact-active，为当前路由添加高亮样式。
<style>
.router-link-active {
color: #42b983;
border-bottom: 2px solid #42b983;
}
</style>下拉菜单实现
结合Vue的v-show或v-if指令，实现带下拉功能的导航菜单。
<template>
<div class="nav-item">
<button @click="toggleDropdown">产品</button>
<ul v-show="isDropdownOpen">
<li><router-link to="/products/web">Web产品</router-link></li>
<li><router-link to="/products/mobile">移动产品</router-link></li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
isDropdownOpen: false
}
},
methods: {
toggleDropdown() {
this.isDropdownOpen = !this.isDropdownOpen
}
}
}
</script>
