1.在路由router文件里面写路由元信息传递左侧显示的路由，以及路由的名字
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
children: [
{
path: 'order',
name:'order',
meta:{
isShow:true,
title:'订单列表'
},
component: () => import('../views/order/order.vue'),
},
{
path: 'userList',
name:'userList',
meta:{
isShow:true,
title:'用户列表',
},
component: () => import('../views/userList/userList.vue'),
},
]
}
];
在首页：
<template>
<div class="common-layout">
<el-container>
<el-header height="80px">
<el-row :gutter="20">
<el-col :span="4"
><img class="logo" src="../assets/logo.png" alt=""
/></el-col>
<el-col :span="16"><h2>后台管理系统</h2></el-col>
<el-col class="right_btn" :span="4"
><el-button type="text">admin</el-button></el-col
>
</el-row>
</el-header>
<el-container>
<el-aside width="200px">
<!-- 3.开启理由模式，router -->
<el-menu
router
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
default-active="1"
text-color="#fff"
>
<!-- 2.通过for循环将路由元信息里面的路由渲染到左侧 -->
<el-menu-item :index="i.path" v-for="i in list" :key='i.path'>
<el-icon><icon-menu /></el-icon>
<span>{{i.meta.title}}</span>
</el-menu-item>
</el-menu>
</el-aside>
<!-- 4.在el-main标签添加router-view -->
<el-main><router-view></router-view></el-main>
</el-container>
</el-container>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
//自动生成左边的菜单栏1.引入路由
import {useRouter} from 'vue-router';
export default defineComponent({
setup() {
const router =useRouter();
const list =router.getRoutes().filter(v=>v.meta.isShow);//拿到所有的路由实例,用filter过滤路由元信息为true的路由
return {
list
};
},
});
</script>
