当前位置：首页 > VUE

vue实现侧部导航

2026-02-18 23:45:44VUE

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.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

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

<style>
.sidebar {
  width: 200px;
  background: #f4f4f4;
  padding: 20px;
}
.sidebar ul {
  list-style: none;
  padding: 0;
}
.sidebar li {
  margin-bottom: 10px;
}
.sidebar a {
  text-decoration: none;
  color: #333;
}
.sidebar a:hover {
  color: #42b983;
}
</style>

使用 Element UI 的侧边栏组件

如果项目使用 Element UI，可以直接使用其提供的 el-menu 组件实现侧部导航。

<template>
  <el-menu
    default-active="/"
    class="el-menu-vertical"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
  >
    <el-menu-item index="/">
      <i class="el-icon-menu"></i>
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="/about">
      <i class="el-icon-document"></i>
      <span>关于</span>
    </el-menu-item>
    <el-menu-item index="/contact">
      <i class="el-icon-setting"></i>
      <span>联系</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'Sidebar'
};
</script>

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

使用 Vuex 管理导航状态

对于需要动态切换导航状态的场景，可以通过 Vuex 管理导航的展开和折叠状态。

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

Vue.use(Vuex);

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

<template>
  <div class="sidebar" :class="{ 'collapsed': isSidebarCollapsed }">
    <button @click="toggleSidebar">切换</button>
    <ul>
      <li v-for="item in menuItems" :key="item.path">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['isSidebarCollapsed'])
  },
  methods: {
    ...mapMutations(['toggleSidebar'])
  },
  data() {
    return {
      menuItems: [
        { name: '首页', path: '/' },
        { name: '关于', path: '/about' },
        { name: '联系', path: '/contact' }
      ]
    };
  }
};
</script>

<style>
.sidebar {
  width: 200px;
  transition: width 0.3s;
}
.sidebar.collapsed {
  width: 60px;
}
</style>

响应式侧边栏

通过监听窗口大小变化，实现侧边栏的响应式布局。

<template>
  <div class="sidebar" :class="{ 'mobile': isMobile }">
    <ul>
      <li v-for="item in menuItems" :key="item.path">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false,
      menuItems: [
        { name: '首页', path: '/' },
        { name: '关于', path: '/about' },
        { name: '联系', path: '/contact' }
      ]
    };
  },
  mounted() {
    this.checkScreenSize();
    window.addEventListener('resize', this.checkScreenSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkScreenSize);
  },
  methods: {
    checkScreenSize() {
      this.isMobile = window.innerWidth < 768;
    }
  }
};
</script>

<style>
.sidebar {
  width: 200px;
}
.sidebar.mobile {
  width: 100%;
}
</style>

以上方法可以根据项目需求选择适合的实现方式，灵活调整功能和样式。

vue实现侧部导航