Vue 动态菜单+动态路由（基于Element UI）

文章目录

• 使用场景
• 一、动态菜单
  • 1.创建菜单组件
• 二、动态面包屑
  • 1.创建面包屑组件
• 三、动态标签页
  • 1.创建标签页组件
• 四、动态路由
  • 1.router代码
  • 2.store代码
• 总结

---

使用场景

主要使用Vue3与Element UI，在项目开发中可能会遇到从后端取得数据，到前端去渲染菜单，从而实现动态路由与动态菜单。

---

一、动态菜单

1.创建动态菜单组件

 代码如下：

<template>
  <div>
    <el-menu :unique-opened="true" :default-openeds="openList"
      :default-active="'/index/' + this.$store.state.TabseditableTabsValue" :collapse-transition="true" router
      class="el-menu-vertical-demo" style="width: 200px;min-height: calc(100vh );">
      <el-sub-menu v-for="(menu, i) in menus" :index="i + 1" :key="i">
        <template #title>
          <el-icon>
            <Avatar />
          </el-icon>
          <span>{
  { menu.authname }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item @click="getpath(item.path, item.authname, item.name, menu.authname ,menu.path)"
            :index="'/index/' + item.path" v-for="(item, index) in menu.children" :key="index">
            <el-icon>
              <ArrowRight />
            </el-icon>{
  { item.authname }}
          </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>
<style>
.el-men