当前位置：首页 > VUE

vue实现侧导航

2026-01-14 01:03:32VUE

Vue 实现侧边导航栏的方法

使用 Vue Router 和动态组件

在 Vue 项目中，可以通过 Vue Router 结合动态组件实现侧边导航栏。创建一个侧边栏组件，包含导航菜单项，点击菜单项时切换路由或动态加载对应的组件。

<template>
  <div class="sidebar">
    <ul>
      <li v-for="item in menuItems" :key="item.path" @click="navigateTo(item.path)">
        {{ item.title }}
      </li>
    </ul>
  </div>
  <div class="content">
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { title: '首页', path: '/' },
        { title: '关于', path: '/about' },
        { title: '联系', path: '/contact' }
      ]
    };
  },
  methods: {
    navigateTo(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style>
.sidebar {
  width: 200px;
  background: #f0f0f0;
  float: left;
}
.content {
  margin-left: 220px;
}
</style>

使用 Element UI 的 Menu 组件

如果项目中使用了 Element UI，可以通过其提供的 Menu 组件快速实现侧边导航栏。

vue实现侧导航

<template>
  <el-menu
    default-active="/"
    class="el-menu-vertical"
    @select="handleSelect"
    router
  >
    <el-menu-item index="/">
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="/about">
      <span>关于</span>
    </el-menu-item>
    <el-menu-item index="/contact">
      <span>联系</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  methods: {
    handleSelect(index) {
      console.log(index);
    }
  }
};
</script>

<style>
.el-menu-vertical {
  height: 100vh;
}
</style>

使用 Vuex 管理导航状态

在大型项目中，可以使用 Vuex 管理侧边导航栏的展开/折叠状态，确保状态在不同组件间共享。

// store.js
export default new Vuex.Store({
  state: {
    isSidebarCollapsed: false
  },
  mutations: {
    toggleSidebar(state) {
      state.isSidebarCollapsed = !state.isSidebarCollapsed;
    }
  }
});

在组件中调用：

vue实现侧导航

<template>
  <div :class="['sidebar', { 'collapsed': isCollapsed }]">
    <!-- 导航内容 -->
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['isSidebarCollapsed']),
    isCollapsed() {
      return this.isSidebarCollapsed;
    }
  },
  methods: {
    ...mapMutations(['toggleSidebar'])
  }
};
</script>

响应式侧边导航栏

通过 CSS 媒体查询和 Vue 的响应式特性，可以实现侧边导航栏在不同屏幕尺寸下的自适应。

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

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

结合 Vue 的 v-show 或 v-if 控制导航内容的显示与隐藏：

<template>
  <div class="sidebar">
    <div v-show="!isMobile || isExpanded">
      <!-- 导航内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false,
      isExpanded: false
    };
  },
  mounted() {
    this.checkScreenSize();
    window.addEventListener('resize', this.checkScreenSize);
  },
  methods: {
    checkScreenSize() {
      this.isMobile = window.innerWidth < 768;
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    }
  }
};
</script>

通过以上方法，可以灵活实现 Vue 项目中的侧边导航栏功能，满足不同场景的需求。

标签: vue