路由的数组，他也是层级的关系，而我们的导航菜单与路由数组一样，也是一个层级关系，并且大部分内容都是对应的，一个路由页对应一个菜单按钮。
所以，其实我们可以直接将路由数组，作为我们的导航菜单的数据，我们对他进行遍历。
针对性隐藏
父级
但是不一定每个路由都要显示在菜单栏上，所以我们可以给路由数组的对象，增加一个key值用于判断，这个路由对象是否需要出现在导航栏上，如：
export default [{
path: "/admin",
component: () =>
import ("@/views/admin")
},
{
path: "/form",
component: () =>
import ("@/views/admin"),
hideInMenu: true,
}
]
我们设置了一个hideInMenu属性，他的值为true，那么就表示，这个路由对象，我们不让他显示在菜单栏上，所有在遍历的时候v-if做个判断即可。
当然，我们的路由不可能只有一个层级，他是有可能有子级路由的，所以他会有一个children属性，那么我们可以通过判断是否有children属性，来是否在导航栏菜单增加子级导航菜单
子级
但是，在导航栏上，不一定所有的子级都要遍历上去，所以，我们也可以对是否遍历子级，做一个key值
export default [
{
path: "/admin", component: () => import("@/views/admin")
},
{
path: "/form", component: () => import("@/views/admin"),
hideInMenu: true,
},
{
path: "/child", component: () => import("@/views/admin"),
hideChildrenInMenu: true,
children: [
{ path: "",name:"a", component: () => import("@/views/child/a") },
{ path: "b",name:"b", component: () => import("@/views/child/b") },
]
},
]
hideChildrenInMenu: true表示这个路由的子级children不显示在导航菜单里。
我们通过这两个key值对这个路由数组进行标识，当导航栏通过这个路由数组进行遍历是，针对性的显示或者隐藏。
获取这个路由数组
既然要通过这个路由数组进行遍历，那么首先我们需要获取到这个数据才行。
有两种方式拿到数据：
1. 通过$router全局的路由根对象获取
this.$router.options.routes
在vue文件里面，通过this来获取到全局$router对象，然后获取他的配置属性options，从配置中我们拿到路由数组routes。
这个routes就是我们配置的路由数组对象了。
import引入
既然我们最终拿到的是routes这个数组，那么我们也可以通过导入的方式获取。
假设我们有一个routes.js文件，他export导出了一个路由数组对象，那么我可以直接引入
import routes from "@/router/routes";
对routes数组进行递归
我们进行一个约定：只有存在name属性的路由，我们才将它显示到菜单上
数据拿到以后，我们肯定是需要做一个遍历操作，将需要的内容，我们提取出来，然后给导航菜单遍历。
那么我们还要考虑到一个问题，就是层级的问题，我们的层级不一定是只有一层，children里面可能还有children。
于是一个不得不进行递归的现实展现在我们面前，我们必须进行递归操作，才能完整拿到需要遍历的数组对象。
于是：
methods: {
getMenuData(routes = []) {
const menuData = [];
routes.forEach((route) => {
//是否显示自己
if (route.name && !route.hideInMenu) {
const newRoute = { ...route }; //解构赋值到新变量上
delete newRoute.children; //删除children，因为需要判断
//是否有子级，并且显示
if (route.children && !route.hideChildrenInMenu) {
//递归并赋值
newRoute.children = this.getMenuData(route.children);
}
//一个判断递归结束
menuData.push(newRoute);
} else if (
!route.hideInMenu &&
!route.hideChildrenInMenu &&
route.children
) {
//有子级，但是不隐藏自己，也不隐藏子级
//拿到子级，并将其提升层级，丢到外面
menuData.push(...this.getMenuData(route.children));
}
});
return menuData;
}
}
我们接受一个数组，并对这个数组进行遍历。
如果这个route对象存在name，并且不隐藏自己，我们就创建一个变量存储这个route对象。
但是我们还要判断这个route对象是否有子级，加上子级有可能是不显示的，所以先进行delete删除，然后if判断
如果这个route存在children，并且不隐藏子级，我们就对他进行递归。
最后递归结束后我们将这个newRoute变量push到总的新数组menuData里面
然后我们还要考虑到一种情况，就是没有name的情况，那么一般来说他可能是这样的路由结构
{
path: "/child", component: () => import("@/views/admin"),
children: [
{ path: "",name:"a", component: () => import("@/views/child/a") },
{ path: "b",name:"b", component: () => import("@/views/child/b") },
]
},
父级里面有一个默认子路由，默认路由有name（父级的name值必须给子级默认路由）
所以
我们还需要判断一下这个情况，一般我们的做法就是将这个路由里面的children提出来，升层，子级变为父级了，当然你也可以将它作为一个子级来做。
我的写法是拿出来升层。
menuData.push(...this.getMenuData(route.children));
先进行递归，拿到数组后，使用扩展运算符将数组里的内容拿出来，push进menuData
如果有必要，也可以写成子级，不升层，那实际上和if(route.nam...)差不多了，那么约定就没啥用了，这个就不多说了。
我们拿到数组之后，就可以进行导航菜单的遍历了。
导航菜单的生成
这里就有一个问题，既然我们不知道层级有多深，那么生成导航菜单时，也是不知道这个菜单要遍历几次的，所以也需要使用递归。
递归有两种方式，一种是组件递归和函数式组件递归。
组件递归
组件有一个name属性，我们设置个name属性，然后直接像组件一样使用
<template>
<div>
<menu/>
</div>
</template>
<script>
export default {
name:"menu",
}
</script>
但是有一点我们需要注意，在使用递归的时候，一定要加一个限制，否则递归无限制，肯定会报错的。
这个限制，在这个导航菜单里，就是层级的数量了，有多少层，我递归的是就递归几次，如果没有了，我们就停止递归。
这个判断无非就是if(children)判断children是否存在了。
函数式组件递归
函数式组件递归，需要和父组件配合。
父组件
<template>
<div>
<menu/>
</div>
</template>
<script>
import Menu from "./Menu";
export default {
components: {
"menu": Menu,
},
}
</script>
函数式组件
<template functional>
<div>
<menu/>
</div>
</template>
<script>
export default {
props: ["data"],
}
</script>
函数式组件没有name，所以父组件引入这个组件，并注册的时候，那个key值就是name了，只要函数式组件内使用相同key值名称的组件，就可以进行递归。
注意就是在函数式组件内，参数通过props接收，比如上面我们用了一个data。
如果要使用的话和vue组件的用法不一样，如：
<template functional>
<div>
<span>{{props.data.meta.title}}</span>
<menu :key="props.data.path"/>
</div>
</template>
<script>
export default {
props: ["data"],
}
</script>
需要加上props这个前缀。
示例代码
父级组件
<template>
<div class="nav">
<ul>
<template v-for="route in menuData">
<!-- 无子级 -->
<li v-if="!route.children" :key="route.name">{{route.meta.title}}</li>
<!-- 有子级 -->
<menu :data="route" :key="route.name">
</template>
</ul>
</div>
</template>
<script>
import Menu from "./Menu";
export default {
components: {
"menu": Menu,
},
};
</script>
子级函数式组件
<template functional>
<div class="child">
<h2 class="title">{{props.data.meta.title}}</h2>
<ul>
<template v-for="route in props.data.children">
<!-- 无子级 -->
<li v-if="!route.children" :key="route.name">{{route.meta.title}}</li>
<!-- 有子级 -->
<menu :data="route" :key="route.name">
</template>
</ul>
</div>
</template>
<script>
export default {
props: ["data"],
};
</script>
然后基本就是这样了，这个就是我对导航菜单和路由结合的一个理解。
