vue框架实现后台导航

Vue 实现后台导航的方法

使用 Vue 实现后台导航通常涉及路由配置、动态菜单生成和权限控制。以下是具体实现方案：

路由配置

在 router/index.js 中定义路由结构，区分公开路由和权限路由：

const routes = [
  {
    path: '/login',
    component: () => import('@/views/Login.vue'),
    meta: { requiresAuth: false }
  },
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true }
  },
  // 其他路由...
]

动态菜单组件

创建 NavMenu.vue 组件，使用 el-menu（Element UI）或自定义组件：

<template>
  <el-menu 
    :default-active="$route.path" 
    router
    background-color="#304156"
    text-color="#bfcbd9">
    <sidebar-item v-for="route in permissionRoutes" :key="route.path" :item="route"/>
  </el-menu>
</template>

<script>
import SidebarItem from './SidebarItem'
export default {
  components: { SidebarItem },
  computed: {
    permissionRoutes() {
      return this.$store.state.permission.routes
    }
  }
}
</script>

权限控制

通过 Vuex 管理可访问路由列表，结合路由守卫实现动态加载：

// permission.js
router.beforeEach(async (to, from, next) => {
  if (store.getters.roles.length === 0) {
    const { roles } = await store.dispatch('user/getInfo')
    const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
    router.addRoutes(accessRoutes)
    next({ ...to, replace: true })
  } else {
    next()
  }
})

嵌套菜单处理

使用递归组件处理多级菜单（SidebarItem.vue）：

<template>
  <el-submenu v-if="hasChildren" :index="item.path">
    <template #title>{{ item.meta.title }}</template>
    <sidebar-item 
      v-for="child in item.children" 
      :key="child.path" 
      :item="child"/>
  </el-submenu>
  <el-menu-item v-else :index="item.path">
    {{ item.meta.title }}
  </el-menu-item>
</template>

<script>
export default {
  name: 'SidebarItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    hasChildren() {
      return this.item.children && this.item.children.length > 0
    }
  }
}
</script>

状态持久化

结合 localStorage 保存菜单折叠状态：

// store/modules/app.js
const state = {
  sidebar: {
    opened: localStorage.getItem('sidebarStatus') !== 'closed'
  }
}

const mutations = {
  TOGGLE_SIDEBAR(state) {
    state.sidebar.opened = !state.sidebar.opened
    localStorage.setItem('sidebarStatus', state.sidebar.opened ? 'opened' : 'closed')
  }
}

响应式处理

通过 CSS 媒体查询和 JavaScript 实现移动端适配：

@media screen and (max-width: 992px) {
  .sidebar-container {
    width: 0 !important;
  }
  .main-container {
    margin-left: 0;
  }
}

以上方案可根据具体需求调整，如替换 UI 库（Ant Design Vue 等）或改用 Composition API 实现。关键点在于路由动态加载、菜单递归渲染和权限状态管理三部分的协同工作。