vue侧边导航栏实现（3分钟学会搭建动态侧边栏导航：Vue + Element-UI）

时间2025-08-02 05:25:59分类IT科技浏览6328

导读：1 效果预览分为3个部分：...

1 效果预览

分为3个部分：

头部侧边栏：动态选择页面：根据侧边栏动态跳转

2 基本组件

components中包含：头部组件、侧边栏组件、页面1、页面2

asideNav是我们的侧边栏

pagesOne / pagesTwo 是我们要实现切换的页面，页面随便写点内容就好

App中引入组件

<template> <div class="app">  <myHeader></myHeader> <el-container style="height: 100vh; border: 1px solid #eee; margin: 0; border: 0; padding: 0;">   <el-aside style="width: 200px;"> <asideNav></asideNav> </el-aside>  <el-main> <router-view></router-view> </el-main> </el-container> </div> </template> <script> import myHeader from "@/components/myHeader" import asideNav from "@/components/asideNav" export default { name: "App", components: { myHeader, asideNav, } } </script> <style> html, body{ height: 100%; margin: 0; border: 0; padding: 0; } </style>

3 配置 vue-router

3.1 安装

首先安装vue-router

npm install vue-router

如果上面的命令报错，可能因为要下载的router版本过高，由于vue与vue-router版本兼容的问题，如果下载版本过高，在启动项目时会报错。可以下载低版本的vue-router

npm install vue-router@3.1.3 --save-dev

最后在package.json文件中查看是否下载成功

3.2 引入vue-router

Main.js文件中

3.3 配置路由匹配

新建文件：src/routers/index.js

配置路径对应的页面是什么

这里简单示范，有两个主页面进行切换：pagesOne / pagesTwo //引入依赖及组件 import Vue from vue import Router from vue-router //引入vue-router Vue.use(Router) //注册vue-router import pagesOne from ../components/pagesOne import pagesTwo from ../components/pagesTwo export default new Router({ routes: [ { path: /, name: pagesOne, component: pagesOne }, { path: /pagesOne, name: pagesOne, component: pagesOne }, { path: /pagesTwo, name: pagesTwo, component: pagesTwo } ] })

后续点击侧边栏时，指定的组件将替换该 router-view

4 引入Element-UI

Element-UI官网：https://element.eleme.cn/#/zh-CN/component/installation

4.1 安装

推荐使用npm安装

npm i element-ui -S

4.2 引入样式

public/index.html文件

引入 js 和 css 文件  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

4.3 使用Element-UI

我选择的是这个，将对应的代码到asideNav.vue

对代码进行修改，对应index的值为我们在index.js中配置的

点击导航一，切换pagesOne

点击导航四，切换pagesTwo

等等

然后运行，就可以实现了

asideNav.vue的代码

<template> <div class="aside" style="height: 100%; width: 100%;"> <el-row class="tac" style="height: 100%; width: 100%;"> <el-col :span="12" style="height: 100%; width: 100%;"> <el-menu default-active="this.$route.path" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="height: 100%; width: 100%;"> <el-submenu index="/pagesOne"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group> <el-menu-item index="/">选项1</el-menu-item> <el-menu-item index="/">选项2</el-menu-item> <el-menu-item index="/">选项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">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index=""> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="/pagesOne"> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="/pagesTwo"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> <el-menu-item index="/pagesTwo"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </el-col> </el-row> </div> </template> <script> export default { methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } } </script>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。