先看效果，整体界面结构如下
点击左侧菜单栏，右侧切换显示不同页面内容。
Vue3使用路由–南河小站
1 路由配置
路由配置如下：
const routes = [
{
path: "",
component: () => import("@/layout/baseView.vue"),
redirect: "/index",
children: [
{
path: "/index",
name: "首页",
icon: "SwitchButton",
hidden: false,
component: () => import("@/page/dashboard/dashboard.vue"),
},
{
path: "/content",
name: "内容",
icon: "Discount",
hidden: false,
component: () => import("@/layout/rightView.vue"),
children: [
{
path: "manage-comment",
icon: "MessageBox",
name: "管理评论",
hidden: false,
component: () => import("@/page/content/manageComment.vue"),
},
{
path: "manage-image",
icon: "Odometer",
name: "管理图片",
hidden: false,
component: () => import("@/page/content/manageImage.vue"),
},
],
},
{
path: "/user",
icon: "UserFilled",
name: "用户",
hidden: false,
component: () => import("@/layout/rightView.vue"),
children: [
{
path: "list",
icon: "User",
name: "用户列表",
hidden: false,
component: () => import("@/page/user/list.vue"),
},
{
path: "reset-pwd",
icon: "Unlock",
name: "重置密码",
hidden: false,
component: () => import("@/page/user/resetPwd.vue"),
},
// ....
],
},
{
path: "/operation",
icon: "Operation",
name: "运维",
hidden: false,
component: () => import("@/layout/rightView.vue"),
children: [
{
path: "mange-category",
icon: "Edit",
hidden: false,
name: "管理分类",
component: () => import("@/page/operation/manageCategory.vue"),
},
{
path: "mange-carousel",
icon: "Crop",
name: "管理轮播图",
hidden: false,
component: () => import("@/page/operation/manageCarousel.vue"),
},
],
},
],
},
{
path: "/login",
hidden: true,
component: () => import("@/page/login/login.vue"),
},
];
说明：
@/layout/baseView.vue是整体页面结构
@/layout/rightView.vue是公共页面用于显示数据内容。
@/page/login/login.vue是登陆页面
2 页面结构
右侧数据内容视图是动态的，其它整个页面结构是固定的，因此提取baseView.vue作为页面基本结构。
登录界面是另一个页面整体，因此login.vue和基本结构页面baseView.vue都在App.vue页面中通过路由进行切换，因此App.vue中添加router-view进行动态路由渲染。
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
左侧菜单导航，菜单是根据路由进行动态渲染的，所以将路由生成菜单抽取为独立组组件leftMenuBar.vue。在mounted()中获取路由配置
export default {
data() {
return {
menuList: [],
};
},
mounted() {
let routes = router.options.routes;
this.menuList = routes[0].children;
console.log(this.menuList);
},
};
⚠️Vue3通过router.options.routes 获取配置的路由
在右侧数据视图页面rightView.vue添加router-view标签
<template>
<div class="right-view">
<div class="header"></div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
3 结合Element-plus 生成菜单导航
导入Element-plus
遍历路由通过element-plus的Menu组件生成菜单导航，完整的代码如下：
<template>
<div>
<el-menu
default-active="0"
:unique-opened="true"
class="el-menu-vertical-demo"
>
<template v-for="(item, index) in menuList" :key="index">
<router-link :to="item.path" v-if="!item.children" :key="index">
<el-menu-item :index="index + ''">
<el-icon><component :is="item.icon"></component></el-icon>
<span>{{ item.name }}</span>
</el-menu-item>
</router-link>
<el-sub-menu :index="index + ''" v-else>
<template #title>
<el-icon><component :is="item.icon"></component></el-icon>
<span>{{ item.name }}</span>
</template>
<router-link
:to="item.path + '/' + sub.path"
v-for="(sub, subIndex) in item.children"
:key="subIndex"
>
<el-menu-item :index="index + '-' + subIndex">
<el-icon><component :is="sub.icon"></component></el-icon>
<span>{{ sub.name }}</span>
</el-menu-item>
</router-link>
</el-sub-menu>
</template>
</el-menu>
</div>
</template>
4 设置菜单图标
由于element-plus使用svg 图标，复制的代码是<el-icon><Search /></el-icon>这样的，因此在遍历路由时，就不能通过<i :calss = "xxxx"></i>设置了，要通过<el-icon><component :is="xxxx"></component></el-icon>来设置，:is绑定的是icon的名称文章来源：https://www.toymoban.com/news/detail-641509.html
<el-icon><component :is="item.icon"></component></el-icon>
⚠️这个地方element不同，element使用的是font-class的图标，可用 直接绑定文章来源地址https://www.toymoban.com/news/detail-641509.html
到了这里，关于Vu3+Element-Plus根据路由配置生成菜单导航栏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
