vue3+element-plus動態(tài)路由菜單示例代碼

更新時間：2023年11月25日 15:18:01 作者：qq_39196447

這篇文章主要介紹了vue3+element-plus動態(tài)路由菜單示例代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

1、展示效果圖

效果圖

2、創(chuàng)建組件 SideMenu.vue

<!-- 側邊欄組件 -->
<template>
  <div>
    <el-menu :default-active="activeIndex" background-color="#001529" text-color="#ffffff">
      <template v-for="(item, index) in menuList" :key="item.path">
        <!-- 沒有子路由 -->
        <template v-if="!item.children">
          <el-menu-item :index="item.path" v-if="!item.mate.hidden" @click="goPage">
            <template #title>
              <i class="iconfont" :class="item.mate.icon"></i>
              <label>{{ item.mate.title }}</label>
            </template>
          </el-menu-item>
        </template>
        <!-- 只有一個子路由 -->
        <template v-if="item.children && item.children.length == 1">
          <el-menu-item v-if="!item.children[0].mate.hidden" :index="item.children[0].path" @click="goPage">
            <template #title>
              <i class="iconfont" :class="item.children[0].mate.icon"></i>
              <label>{{ item.children[0].mate.title }}</label>
            </template>
          </el-menu-item>
        </template>
        <!-- 有兩個及以上子路由 -->
        <el-sub-menu v-if="item.children && item.children.length > 1" :index="item.path">
          <template #title>
            <i class="iconfont" :class="item.mate.icon"></i>
            <label>{{ item.mate.title }}</label>
          </template>
          <!-- 遞歸組件 -->
          <side-menu :menuList="item.children"></side-menu>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
defineProps(['menuList']);
const activeIndex = ref('1');
const $router = useRouter();
// 路由跳轉
const goPage = (vc) => {
  $router.push(vc.index);
};
</script>
<script lang="ts">
// 當前組件的名稱 用于遞歸組件使用
export default {
  name: 'SideMenu',
};
</script>
<style scoped lang="scss">
.el-menu {
  border-right: none;
  .iconfont {
    padding-right: 6px;
  }
}
</style>

3、路由示例
icon使用的是阿里巴巴圖標庫，需要下載在index.html全局引入
路由先存到store里面

在這里插入圖片描述

創(chuàng)建routes.ts

export const constantRoute = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/login.vue'),
    mate: {
      title: '登錄', //菜單標題
      hidden: true, //是否隱藏：true隱藏，false不隱藏，默認hidden隱藏
    },
  },
  {
    path: '/',
    name: 'layout',
    redirect: '/home',
    component: () => import('@/layout/index.vue'),
    mate: {
      title: 'layout', //菜單標題
      hidden: true, //是否隱藏：true隱藏，false不隱藏
      icon: '', //iconfont 名稱
    },
    children: [
      {
        path: '/home',
        name: 'home',
        component: () => import('@/views/home/home.vue'),
        mate: {
          title: '首頁', //菜單標題
          icon: 'icon-shouye1', //iconfont 名稱
        },
      },
    ],
  },
  {
    path: '/screen',
    name: 'screen',
    component: () => import('@/views/screen/index.vue'),
    mate: {
      title: '數(shù)據(jù)大屏', //菜單標題
      icon: 'icon-zonghefenxipingtai',
    },
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/404/index.vue'),
    mate: {
      title: '404', //菜單標題
      hidden: true, //是否隱藏：true隱藏，false不隱藏
    },
  },
];

4、在頁面中使用

<el-scrollbar class="scroll-bar"> 
    <side-menu :menuList="userStore.menuRoutes"></side-menu>
</el-scrollbar>
<script setup lang="ts">
import useUserStore from '@/store/modules/user';
let userStore = useUserStore();
</script>

到此這篇關于vue3+element-plus動態(tài)路由菜單的文章就介紹到這了,更多相關vue3 element-plus路由菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: