vue实现左侧导航
实现左侧导航的基本结构
使用Vue的<router-link>和<router-view>配合路由配置实现导航功能。导航菜单通常包含在侧边栏组件中，通过Vue Router管理页面跳转。
<template>
<div class="sidebar">
<div class="logo">Logo</div>
<ul class="nav-menu">
<li v-for="item in menuItems" :key="item.path">
<router-link :to="item.path">{{ item.title }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
menuItems: [
{ path: '/home', title: '首页' },
{ path: '/about', title: '关于' },
{ path: '/contact', title: '联系' }
]
};
}
};
</script>
<style scoped>
.sidebar {
width: 200px;
background: #f0f0f0;
height: 100vh;
}
.nav-menu li {
padding: 10px;
}
.router-link-active {
color: #42b983;
font-weight: bold;
}
</style>动态路由与权限控制
通过后端接口或本地配置动态生成导航菜单，结合权限过滤显示内容。使用v-if或计算属性控制菜单项的可见性。
// 示例：动态路由配置
export default {
computed: {
filteredMenuItems() {
const userRole = 'admin'; // 从Vuex或本地存储获取用户角色
return this.menuItems.filter(item => item.roles.includes(userRole));
}
}
};嵌套子菜单实现
支持多级菜单展开/折叠功能，通过递归组件或嵌套v-for实现。
<template>
<ul class="submenu">
<li v-for="subItem in item.children" :key="subItem.path">
<router-link :to="subItem.path">{{ subItem.title }}</router-link>
</li>
</ul>
</template>响应式布局适配
结合CSS媒体查询或UI框架（如Element UI、Ant Design Vue）实现侧边栏折叠功能。
@media (max-width: 768px) {
.sidebar {
width: 60px;
overflow: hidden;
}
}状态持久化
使用localStorage或Vuex保存导航栏的展开/折叠状态，确保页面刷新后状态一致。
// 在Vuex中保存状态
state: {
isCollapsed: false
},
mutations: {
toggleSidebar(state) {
state.isCollapsed = !state.isCollapsed;
}
}第三方库推荐
- Element UI：提供
<el-menu>组件，支持垂直菜单、手风琴效果。 - Ant Design Vue：
<a-menu>组件支持多级菜单和权限控制。 - Vue Router：必需的路由管理库，实现导航跳转。
通过以上方法，可以快速实现一个功能完善的Vue左侧导航组件。
