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

文章目录

使用场景

主要使用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