vue左侧二级导航栏用什么组件

在Vue中实现左侧二级导航栏，推荐使用以下几种组件：1、Element UI的Menu组件；2、Vue Router；3、Vuetify的Navigation Drawer组件。这些组件和工具提供了强大的功能和灵活性，可以帮助开发者轻松创建和管理复杂的导航结构。

一、ELEMENT UI的MENU组件

Element UI是一个基于Vue的UI框架，提供了丰富的组件库，其中Menu组件非常适合用于创建导航栏。它具有良好的文档和示例，可以快速上手。

安装Element UI
```
npm install element-ui --save
```

引入Element UI

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

使用Menu组件

<template>
  <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    <el-submenu index="1">
      <template slot="title"><i class="el-icon-location"></i>导航一</template>
      <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组二">
        <el-menu-item index="1-3">选项3</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="1-4">
        <template slot="title">选项4</template>
        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title"><i class="el-icon-menu"></i>导航二</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

二、VUE ROUTER

Vue Router是Vue.js官方的路由管理器，可以帮助创建单页面应用（SPA）的导航结构。通过配置路由和嵌套路由，可以实现复杂的导航栏。

安装Vue Router
```
npm install vue-router
```

配置路由

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      children: [
        {
          path: 'sub1',
          name: 'sub1',
          component: () => import('./views/Sub1.vue')
        },
        {
          path: 'sub2',
          name: 'sub2',
          component: () => import('./views/Sub2.vue')
        }
      ]
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

创建导航栏

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <div>
        <router-link to="/sub1">Sub1</router-link>
        <router-link to="/sub2">Sub2</router-link>
      </div>
    </nav>
    <router-view/>
  </div>
</template>

三、VUETIFY的NAVIGATION DRAWER组件

Vuetify是一个基于Material Design的Vue UI库，提供了许多现代化的组件。其中，Navigation Drawer组件非常适合用于创建响应式的左侧导航栏。

安装Vuetify
```
npm install vuetify
```

引入Vuetify

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
});

使用Navigation Drawer组件

<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" app>
      <v-list dense>
        <v-list-item-group>
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title>导航一</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-group>
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title>子导航一</v-list-item-title>
              </v-list-item-content>
            </template>
            <v-list-item>
              <v-list-item-content>
                <v-list-item-title>选项1</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>
                <v-list-item-title>选项2</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-group>
        </v-list-item-group>
        <v-list-item-group>
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title>导航二</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar app>
      <v-toolbar-title>标题</v-toolbar-title>
    </v-app-bar>
    <v-main>
      <v-container>
        <router-view></router-view>
      </v-container>
    </v-main>
  </v-app>
</template>

总结

在Vue中实现左侧二级导航栏，Element UI的Menu组件、Vue Router和Vuetify的Navigation Drawer组件都是非常优秀的选择。它们提供了不同的功能和灵活性，可以根据项目需求选择合适的组件。Element UI的Menu组件适用于快速实现复杂的导航结构；Vue Router提供了路由管理的灵活性，适合单页面应用；Vuetify的Navigation Drawer组件则提供了现代化的Material Design风格，适合响应式设计。如果你需要更多的定制化功能，建议结合使用Vue Router和UI组件库，以实现最佳效果。

vue左侧二级导航栏用什么组件

一、ELEMENT UI的MENU组件

二、VUE ROUTER

三、VUETIFY的NAVIGATION DRAWER组件

总结

相关问答FAQs：

发表回复