* 菜單我們將采用官網單文件遞歸菜單示例
* 直接復制示例代碼來修改我們`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分別代表生成菜單項的文本和圖標。
>http://www.hmoore.net/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
