* 菜单我们将采用官网单文件递归菜单示例
* 直接复制示例代码来修改我们`SiderMenu.vue`文件,由于需要递归需要创建一个`SubMenu.vue`文件，两种方式：①函数式组件的形式 ②普通组件，推荐是函数式组件
> * recommend SubMenu.vue
https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue
>* SubMenu1.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu1.vue
* 切换主题菜单是没变化的,我们需要获取到设置的主题参数，可以再`BasicLayout.vue`通过父子传参的方式传到SiderMenu.vue中
> BasicLayout.vue
~~~
<SiderMenu :theme="navTheme" :collapsed="collapsed" />
~~~
> SiderMenu.vue
```
<template>
<div style="width: 256px">
<a-menu
:defaultSelectedKeys="['1']"
:defaultOpenKeys="['2']"
mode="inline"
:theme="theme"
:inlineCollapsed="collapsed"
>
<template v-for="item in list">
<a-menu-item v-if="!item.children" :key="item.key">
<a-icon type="pie-chart" />
<span>{{ item.title }}</span>
</a-menu-item>
<sub-menu v-else :menu-info="item" :key="item.key" />
</template>
</a-menu>
</div>
</template>
<script>
/*
* recommend SubMenu.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue
* SubMenu1.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu1.vue
* */
import SubMenu from "./SubMenu";
export default {
props: {
theme: {
type: String,
default: "dark"
}
},
components: {
"sub-menu": SubMenu
},
data() {
return {
collapsed: false,
list: [
{
key: "1",
title: "Option 1"
},
{
key: "2",
title: "Navigation 2",
children: [
{
key: "2.1",
title: "Navigation 3",
children: [{ key: "2.1.1", title: "Option 2.1.1" }]
}
]
}
]
};
},
methods: {
toggleCollapsed() {
this.collapsed = !this.collapsed;
}
}
};
</script>
```
* 通过路由的配置来生成我们的菜单数据项,有些路由是不需要在菜单栏显示的,所以在 vue-router 的配置中我们增加了一些参数，如 hideChildrenInMenu,hideInMenu,meta.title,meta.icon来辅助生成菜单
> hideChildrenInMenu 用于隐藏不需要在菜单中展示的子路由。
>
> hideInMenu 可以在菜单中不展示这个路由，包括子路由。
>
> meta.title 和 meta.icon分别代表生成菜单项的文本和图标。
>https://www.kancloud.cn/book/pengqiongyao/antd-admin/preview/NProgress%E4%BD%BF%E7%94%A8.md
> router.js
```
import Vue from "vue";
import Router from "vue-router";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
Vue.use(Router);
const router = new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/user",
hideInMenu: true,
component: () =>
import(/* webpackChunkName: "layout" */ "../layouts/UserLayout"),
children: [
{
path: "/user",
redirect: "/user/login"
},
{
path: "/user/login",
name: "login",
component: () =>
import(/* webpackChunkName: "user" */ "../views/user/Login")
},
{
path: "/user/register",
name: "register",
component: () =>
import(/* webpackChunkName: "user" */ "../views/user/Register")
}
]
},
{
path: "/",
component: () =>
import(/* webpackChunkName: "layout" */ "../layouts/BasicLayout"),
children: [
// dashboard
{
path: "/",
redirect: "/dashboard/analysis"
},
{
path: "/dashboard",
name: "dashboard",
meta: { icon: "dashboard", title: "仪表盘" },
component: { render: h => h("router-view") },
children: [
{
path: "/dashboard/analysis",
name: "analysis",
meta: { title: "分析页" },
component: () =>
import(
/* webpackChunkName: "dashboard" */ "../views/Dashboard/Analysis"
)
}
]
},
// form
{
path: "/form",
name: "form",
component: { render: h => h("router-view") },
meta: { icon: "form", title: "表单" },
children: [
{
path: "/form/basic-form",
name: "basicform",
meta: { title: "基础表单" },
component: () =>
import(/* webpackChunkName: "form" */ "../views/Forms/BasicForm")
},
{
path: "/form/step-form",
name: "stepform",
hideChildrenInMenu: true,
meta: { title: "分布表单" },
component: () =>
import(
/* webpackChunkName: "form" */ "../views/Forms/StepForm/Index"
),
children: [
{
path: "/form/step-form",
redirect: "/form/step-form/info"
},
{
path: "/form/step-form/info",
name: "info",
component: () =>
import(
/* webpackChunkName: "form" */ "../views/Forms/StepForm/Step1"
)
},
{
path: "/form/step-form/confirm",
name: "confirm",
component: () =>
import(
/* webpackChunkName: "form" */ "../views/Forms/StepForm/Step2"
)
},
{
path: "/form/step-form/result",
name: "result",
component: () =>
import(
/* webpackChunkName: "form" */ "../views/Forms/StepForm/Step3"
)
}
]
}
]
}
]
},
{
path: "*",
name: "404",
hideInMenu: true,
component: () =>
import(/* webpackChunkName: "exception" */ "@/views/Exception/404")
}
]
});
router.beforeEach((to, from, next) => {
NProgress.start();
next();
});
router.afterEach(() => {
NProgress.done();
});
export default router;
```
* 动态读取`router`路由配置，根据以上配置处理参数，生成菜单
>SiderMenu
