Vue实战053：el-menu组件实现路由导航菜单详解

1、在Element中提供了NavMenu组件可以为网站提供导航功能的菜单，这里我们主要来研究下侧边折叠导航栏菜单的功能实现，Element提供了一个简单的示例，属性我们可以参考Element官网的NavMenu 导航菜单说明：

3、在组件中我们可以看到有<slot name="title"挢旗扦渌;></slot>元艾绱书虻素，这是一个具名的< slot >（指定了slot="title"），可以用来定义额外的插槽，这样父组件引用子组件时，含有属性slot="title"标签内的所有内容将替代子组件的< slot >标签及它的内容。 如果< slot >没有使用name特性时它将作为默认slot出现，父组件没有使用slot特性的元素与内容都将出现，如果没定义默认slot则父组件中没有使用slot特性的元素与内容不会显示。

5、在路由中有些路由是不需要在菜单中显示的，比如注册、登录、找回、401、404、500等页面，所以我们在定义路由的时候可以添加一个属性来过滤掉不需要显示的路由。

7、因为还有子路由的菜单需要使用到el-submenu标签，它封装了展开/收起箭头。所以我们先从路由中提取出没有子路由的对象，直接通过el-menu-item标签来实现即可。而没有子菜单的菜单我们希望点击时能只能跳转路由，所以我们可以在el-menu-item外包裹个router-link标签，通过to属性来指向对应的路由。

9、这里问题就来了，在子菜单中也有没有下级菜单的，所以我们在这里就需要再次对路由进行层级判断并重复之前的操作，而且我们也不知道侨嚅检货路由会有几层不可能不限的去嵌套，这里我们用到了vue的组件递归功能。就是组件可以在自己的模板中调用自身，递归必须定义name属性（调用组件名和组件属性name名需一致才能实现递归）而且一定要有结束条件，否则组件就会被循环引用最终出现“max stack size exceeded”的错误。

10、注意事项：1，刷新定位当前路由，需要在el-menu标签中定义:default-active="$route.path"，这样当你刷新路由时就会自动定位但当前的路由位置。2，el-submenu和el-menu-item标签中的index属性定义，需要解析下路由将要跳转的路由赋给index。