vue+element 导航 实现例子

项目使用的是 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 --save

added 23 packages, and audited 57 packages in 17s

11 packages are looking for funding
  run `npm fund` for details

found 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-menu
        default-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>

上面的代码是从官方上复制过来，删除了长度限制":span="12""

运行

npm run dev

源码：https://download.csdn.net/download/xgw1010/90762342