根据用户的权限来生成路由表，再根据路由表来生成侧边栏。

路由表的动态生成通常可以是前端生成，也可以是后端生成。前端生成的思路有两种：一是通过addRoute来动态添加该用户有权访问的路由，另一种是提前将所有路由定义好，然后再根据用户身份权限和路由允许的身份权限来确定最终允许访问的路由。本文主要讲第二种思路。

布局

项目配置好后我们首先需要解决布局和路由的问题。

后台系统的布局通常是双栏或者是三栏，但是不管是双栏还是三栏布局，通常都需要实现侧边导航栏。

我们在components目录下新建Layout目录，并新增布局、侧边栏等组件。

- components
	- Layout
		- Layout.vue
		- Menu.vue
		- Empty.vue

Layout组件实现双栏或者三栏布局，Menu组件实现侧边栏，而Empty组件则只是为了实现router-view ,取名Empty只是想说明他没有新增任何额外的样式，当然你也可以取个其他的名字。

// /components/Layout/Empty.vue
<template>
	<router-view></router-view>
</template>

// /components/Layout/Layout.vue
<template>
	<div class="box">
		<Menu></Menu>
		<div>
			<router-view></router-view> 
		</div>
	</div>
</template>
<script setup lang="ts">
import Menu from "./Menu.vue";
</script>
<style scoped>
.box {
	display: flex;
}
</style>

我们将Menu组件导入到Layout组件中，目前来说Menu组件还没有任何东西，但是我们后面会给它添加内容。

假设目前我们需要在项目中添加两个界面：findUser和addUser ，并且他们都是admin的子路由，需要让这两个业务界面展示在双栏布局中（左侧侧边导航栏，右侧业务界面），我们可以这样编写router。

// /router/index.ts
import { createRouter, createWebHistory } from "vue-router";

const store = createRouter({
	history: createWebHistory(),
	routes: [
		{
			path: "/",
			redirect: "/admin/findUser", // 重定向
			component: () => import("../components/Layout/Layout.vue"),
			children: [
				{
					path: "admin",
					component: () => import("../components/Layout/Empty.vue"),
					children: [
						{
							path: "addUser",
							component: () =>
								import("../views/admin/addUser.vue"),
						},
						{
							path: "findUser",
							component: () =>
								import("../views/admin/findUser.vue"),
						},
					],
				},
			],
		},
	],
});
export default store;

这样你就可以通过/admin/findUser 来访问到findUser视图了，Empty组件的作用正是在于此，它只是为了填充admin的component属性，映射子路由组件。事实上你可能会想到可以删掉中间那层admin 路由，直接写成admin/findUser，这样就可以少引入Empty组件了，就像这样。

		{
			path: "/",
			redirect: "/admin/findUser", // 重定向
			component: () => import("../components/Layout/Layout.vue"),
			children: [
				{
					path: "admin/addUser",
					component: () =>
						import("../views/admin/addUser.vue"),
				},
				{
					path: "admin/findUser",
					component: () =>
						import("../views/admin/findUser.vue"),
				},
			],
		},

这样的问题是扩展性差，例如想为admin下的每个视图都展示一些额外的样式，如果在第一种方式下就很容易实现，只需将Empty组件改为特定的组件就可以了，但是在第二种方式就很难实现了，另一个问题是这种方式用路由生成侧边栏会麻烦一些。

还有

按照上面的方法实现路由表，只需要将组件作为Layout的子路由，就可以让该视图展现在双栏（或者三栏）布局下，而不需要展示为双栏或者三路布局的视图（例如404，登录界面等），则只需要在写在一级路由中即可。

侧边栏

解决了布局的问题，接下来我们来实现路由表转换成侧边栏的功能。