vue实现侧导航

Vue 实现侧边导航

使用 Vue Router 和动态组件

在 Vue 中实现侧边导航可以通过结合 Vue Router 和动态组件来完成。以下是一个基本实现方法：

<template>
  <div class="sidebar">
    <ul>
      <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>
.sidebar {
  width: 200px;
  background: #f5f5f5;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  padding: 10px 15px;
}

.sidebar a {
  text-decoration: none;
  color: #333;
}

.sidebar a.router-link-exact-active {
  color: #42b983;
  font-weight: bold;
}
</style>

使用 Element UI 的导航组件

如果项目中使用了 Element UI，可以利用其提供的导航组件快速实现：

<template>
  <el-menu
    default-active="1"
    class="el-menu-vertical"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span>导航二</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

响应式侧边导航

实现一个可以折叠展开的响应式侧边导航：

<template>
  <div class="sidebar-container" :class="{ 'collapsed': isCollapsed }">
    <div class="toggle-btn" @click="isCollapsed = !isCollapsed">
      {{ isCollapsed ? '>' : '<' }}
    </div>
    <nav>
      <router-link v-for="item in menuItems" :key="item.path" :to="item.path">
        <i :class="item.icon"></i>
        <span v-show="!isCollapsed">{{ item.title }}</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false,
      menuItems: [
        { path: '/dashboard', title: '仪表盘', icon: 'el-icon-s-home' },
        { path: '/users', title: '用户管理', icon: 'el-icon-user' },
        { path: '/settings', title: '设置', icon: 'el-icon-setting' }
      ]
    }
  }
}
</script>

<style>
.sidebar-container {
  width: 200px;
  height: 100vh;
  background: #304156;
  transition: width 0.3s;
  position: relative;
}

.sidebar-container.collapsed {
  width: 64px;
}

.toggle-btn {
  color: white;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

nav {
  padding-top: 20px;
}

nav a {
  display: block;
  color: #bfcbd9;
  padding: 12px 20px;
  text-decoration: none;
}

nav a:hover {
  background: #263445;
}

nav a.router-link-exact-active {
  background: #263445;
  color: #409EFF;
}

nav i {
  margin-right: 10px;
}
</style>

使用 Vuex 管理导航状态

对于大型应用，可以使用 Vuex 来管理侧边导航的状态：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    sidebarOpen: true
  },
  mutations: {
    toggleSidebar(state) {
      state.sidebarOpen = !state.sidebarOpen
    }
  }
})

在组件中使用：

<template>
  <div class="sidebar" :class="{ 'collapsed': !sidebarOpen }">
    <button @click="toggleSidebar">切换</button>
    <!-- 导航内容 -->
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['sidebarOpen'])
  },
  methods: {
    ...mapMutations(['toggleSidebar'])
  }
}
</script>

动态权限控制导航

根据用户权限动态生成导航菜单：

// 在组件中
export default {
  data() {
    return {
      menuItems: []
    }
  },
  created() {
    this.generateMenuBasedOnPermissions()
  },
  methods: {
    generateMenuBasedOnPermissions() {
      const userPermissions = this.$store.getters.permissions

      const allMenuItems = [
        { path: '/dashboard', title: '仪表盘', permission: 'view_dashboard' },
        { path: '/admin', title: '管理', permission: 'admin_access' },
        { path: '/reports', title: '报告', permission: 'view_reports' }
      ]

      this.menuItems = allMenuItems.filter(item => 
        userPermissions.includes(item.permission)
      )
    }
  }
}