当前位置：首页 > news >正文

vue+element 导航实现例子

news 来源：原创 2025/5/6 6:23:38

项目使用的是 vue 3，安装配置可以查看栏目前面的文章。

组件

导航：https://element-plus.org/zh-CN/component/menu.html
面包屑：https://element-plus.org/zh-CN/component/breadcrumb.html

安装element库

PS D:\code\my-vue3-project>  npm install element-plus --saveadded 23 packages, and audited 57 packages in 17s11 packages are looking for fundingrun `npm fund` for detailsfound 0 vulnerabilities

运行后，项目package.json文件添加了依赖：

"dependencies": {"element-plus": "^2.9.9",...},

代码中导入依赖

在main.js中import 相关依赖

import { createApp } from 'vue'
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import './style.css'
import App from './App.vue'

没导入css，会导致组件的样式不正确。

添加侧边导航实现

导入组件

在.vue文件中导入用到的组件：

<script>
import { ElRow, ElCol, ElMenu,ElSubMenu, ElMenuItem, ElMenuItemGroup,ElIcon } from 'element-plus'
...
</script>

导航实现

<template><el-row class="tac"><el-col><h5 class="mb-2">Default colors</h5><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>Navigator One</span></template><el-menu-item-group title="Group One"><el-menu-item index="1-1">item one</el-menu-item><el-menu-item index="1-2">item two</el-menu-item></el-menu-item-group><el-menu-item-group title="Group Two"><el-menu-item index="1-3">item three</el-menu-item></el-menu-item-group><el-sub-menu index="1-4"><template #title>item four</template><el-menu-item index="1-4-1">item one</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="2"><el-icon><icon-menu /></el-icon><span>Navigator Two</span></el-menu-item><el-menu-item index="3" disabled><el-icon><document /></el-icon><span>Navigator Three</span></el-menu-item><el-menu-item index="4"><el-icon><setting /></el-icon><span>Navigator Four</span></el-menu-item></el-menu></el-col></el-row>
</template>