当前位置：首页 > VUE

vue实现左边导航

2026-01-19 20:15:43VUE

Vue 实现左边导航的方法

使用 Vue 实现左边导航通常涉及组件化开发、路由管理和样式设计。以下是几种常见方法：

使用 Vue Router 和嵌套路由

安装 Vue Router：

npm install vue-router

在 router/index.js 中配置嵌套路由：

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      { path: '/dashboard', component: Dashboard },
      { path: '/settings', component: Settings }
    ]
  }
]

创建导航组件 Navbar.vue：

vue实现左边导航

<template>
  <div class="navbar">
    <router-link to="/dashboard">Dashboard</router-link>
    <router-link to="/settings">Settings</router-link>
  </div>
</template>

使用 Element UI 的导航组件

安装 Element UI：

npm install element-ui

在 main.js 中引入：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

使用 el-menu 组件：

vue实现左边导航

<template>
  <el-menu :default-active="activeIndex" class="el-menu-vertical">
    <el-menu-item index="1" @click="$router.push('/dashboard')">
      Dashboard
    </el-menu-item>
    <el-menu-item index="2" @click="$router.push('/settings')">
      Settings
    </el-menu-item>
  </el-menu>
</template>

自定义响应式导航

添加响应式设计：

<template>
  <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
    <button @click="isCollapsed = !isCollapsed">Toggle</button>
    <nav>
      <router-link v-for="item in navItems" :to="item.path">
        {{ item.name }}
      </router-link>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false,
      navItems: [
        { path: '/dashboard', name: 'Dashboard' },
        { path: '/settings', name: 'Settings' }
      ]
    }
  }
}
</script>

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

使用 Vuex 管理导航状态

在 store.js 中定义状态：

export default new Vuex.Store({
  state: {
    navItems: [
      { path: '/dashboard', name: 'Dashboard' },
      { path: '/settings', name: 'Settings' }
    ],
    isCollapsed: false
  },
  mutations: {
    toggleNav(state) {
      state.isCollapsed = !state.isCollapsed
    }
  }
})

在组件中使用：

<template>
  <div class="sidebar" :class="{ 'collapsed': $store.state.isCollapsed }">
    <button @click="$store.commit('toggleNav')">Toggle</button>
    <nav>
      <router-link 
        v-for="item in $store.state.navItems" 
        :to="item.path"
      >
        {{ item.name }}
      </router-link>
    </nav>
  </div>
</template>

这些方法提供了从基础到高级的左边导航实现方案，可根据项目需求选择适合的方式。

标签: vue