vue实现左边导航

实现左侧导航的基本结构

在Vue项目中实现左侧导航，通常需要结合路由配置和组件化开发。使用<router-link>或编程式导航实现页面跳转，搭配CSS样式完成布局。

<template>
  <div class="left-nav">
    <div class="nav-header">导航标题</div>
    <ul class="nav-list">
      <li v-for="item in navItems" :key="item.path">
        <router-link :to="item.path">{{ item.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { path: '/home', title: '首页' },
        { path: '/about', title: '关于' },
        { path: '/contact', title: '联系' }
      ]
    }
  }
}
</script>

样式设计与布局

通过CSS实现固定定位和垂直布局，常用Flexbox或Grid布局系统。建议使用SCSS/Less增强可维护性。

<style scoped>
.left-nav {
  width: 200px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: #304156;
  color: white;
}

.nav-header {
  padding: 20px;
  font-size: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nav-list a {
  display: block;
  padding: 12px 20px;
  color: rgba(255,255,255,0.7);
  transition: all 0.3s;
}

.nav-list a:hover {
  color: white;
  background: rgba(0,0,0,0.2);
}

.router-link-active {
  color: white !important;
  background: rgba(0,0,0,0.3);
}
</style>

动态路由与权限控制

对于需要权限控制的导航菜单，可通过v-if或计算属性过滤显示项。结合Vuex或Pinia管理用户权限状态。

computed: {
  filteredNavItems() {
    return this.navItems.filter(item => {
      return this.$store.state.user.roles.includes(item.requiredRole)
    })
  }
}

嵌套子菜单实现

多级导航菜单可通过递归组件实现。添加hasChildren字段判断是否需要展开子菜单。

<template>
  <li v-for="item in navItems" :key="item.path">
    <template v-if="!item.children">
      <router-link :to="item.path">{{ item.title }}</router-link>
    </template>
    <template v-else>
      <div @click="toggleSubMenu(item)" class="menu-title">
        {{ item.title }}
        <span class="arrow" :class="{ 'rotate': item.expanded }"></span>
      </div>
      <ul v-show="item.expanded">
        <nav-item :navItems="item.children"></nav-item>
      </ul>
    </template>
  </li>
</template>

响应式处理

通过媒体查询实现移动端适配，添加展开/收起功能按钮。

@media (max-width: 768px) {
  .left-nav {
    transform: translateX(-100%);
    transition: transform 0.3s;
  }
  .left-nav.active {
    transform: translateX(0);
  }
}

状态持久化

使用localStorage或sessionStorage保存菜单展开状态，提升用户体验。

methods: {
  toggleSubMenu(item) {
    this.$set(item, 'expanded', !item.expanded)
    localStorage.setItem(`menu_${item.path}`, item.expanded)
  }
}