vue导航栏实现
Vue 导航栏实现方法
基础实现（基于 Vue Router）
在 Vue 项目中，导航栏通常与 Vue Router 结合使用。以下是一个基础实现示例：
模板部分
<template>
<nav>
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
<router-link to="/contact">联系我们</router-link>
</nav>
</template>样式部分
nav {
background-color: #333;
padding: 10px;
}
router-link {
color: white;
margin-right: 15px;
text-decoration: none;
}
router-link:hover {
color: #42b983;
}动态导航栏
对于需要根据用户权限或状态动态变化的导航栏：
<template>
<nav>
<router-link v-for="item in navItems" :key="item.path" :to="item.path">
{{ item.name }}
</router-link>
</nav>
</template>
<script>
export default {
data() {
return {
navItems: [
{ path: '/', name: '首页' },
{ path: '/products', name: '产品' },
{ path: '/about', name: '关于我们' }
]
}
}
}
</script>响应式导航栏
实现移动端友好的响应式导航栏：
<template>
<div>
<button @click="toggleMenu">菜单</button>
<nav :class="{ 'show': isMenuOpen }">
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
</nav>
</div>
</template>
<script>
export default {
data() {
return {
isMenuOpen: false
}
},
methods: {
toggleMenu() {
this.isMenuOpen = !this.isMenuOpen
}
}
}
</script>
<style>
nav {
display: none;
}
nav.show {
display: block;
}
@media (min-width: 768px) {
button {
display: none;
}
nav {
display: block;
}
}
</style>使用 UI 框架
如果使用 Element UI 等框架：
<template>
<el-menu mode="horizontal">
<el-menu-item index="1">首页</el-menu-item>
<el-submenu index="2">
<template slot="title">产品</template>
<el-menu-item index="2-1">产品1</el-menu-item>
<el-menu-item index="2-2">产品2</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
import { ElMenu, ElMenuItem, ElSubmenu } from 'element-ui'
export default {
components: {
ElMenu,
ElMenuItem,
ElSubmenu
}
}
</script>导航守卫
实现路由切换时的权限控制：
// 在 router/index.js 中
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
} else {
next()
}
})高亮当前路由
为当前路由添加高亮样式：
router-link-exact-active {
color: #42b983;
font-weight: bold;
}
