当前位置：首页 > VUE

vue实现侧部导航

2026-01-18 07:24:38VUE

使用 Vue Router 实现侧部导航

在 Vue 项目中，侧部导航通常结合 Vue Router 实现路由跳转。通过配置路由表，动态生成导航菜单。

路由配置示例

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/contact', name: 'Contact', component: Contact }
]

导航组件模板

<template>
  <div class="sidebar">
    <router-link 
      v-for="route in routes" 
      :key="route.path" 
      :to="route.path"
      active-class="active"
    >
      {{ route.name }}
    </router-link>
  </div>
</template>

使用递归组件实现多级导航

对于多层级菜单，可采用递归组件实现。

递归组件示例

<template>
  <ul>
    <li v-for="item in menuItems" :key="item.path">
      <router-link :to="item.path">{{ item.title }}</router-link>
      <menu-tree v-if="item.children" :menuItems="item.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'MenuTree',
  props: ['menuItems']
}
</script>

结合状态管理控制导航折叠

使用 Vuex 或 Pinia 管理导航栏的展开/折叠状态。

vue实现侧部导航

状态管理示例

// store.js
export const useAppStore = defineStore('app', {
  state: () => ({ isCollapse: false }),
  actions: {
    toggleCollapse() { this.isCollapse = !this.isCollapse }
  }
})

组件中使用

<template>
  <button @click="store.toggleCollapse">
    {{ store.isCollapse ? '展开' : '折叠' }}
  </button>
  <div :class="['sidebar', { 'collapsed': store.isCollapse }]">
    <!-- 导航内容 -->
  </div>
</template>

响应式设计处理

通过 CSS 媒体查询实现移动端适配。

响应式样式示例

vue实现侧部导航

.sidebar {
  width: 250px;
  transition: width 0.3s;
}

@media (max-width: 768px) {
  .sidebar {
    width: 80px;
  }
}

.collapsed {
  width: 64px;
}

动态权限控制导航显示

根据用户权限过滤导航菜单项。

权限过滤示例

const filteredRoutes = computed(() => {
  return routes.filter(route => {
    return userPermissions.includes(route.meta?.permission)
  })
})

使用第三方 UI 库

可选用现成的 UI 组件库快速实现：

Element Plus 的 el-menu 组件
Ant Design Vue 的 a-menu 组件
Vuetify 的 v-navigation-drawer 组件

Element Plus 示例

<el-menu :collapse="isCollapse">
  <el-submenu v-for="item in menuData" :key="item.id">
    <template #title>{{ item.title }}</template>
    <el-menu-item 
      v-for="child in item.children" 
      :key="child.path" 
      :index="child.path"
    >
      {{ child.title }}
    </el-menu-item>
  </el-submenu>
</el-menu>

标签: vue