动态渲染NavMenu导航（vue-router）

这里是根据vue-router和element-ui中的NavMenu进行组合。根据路由配置动态的渲染NavMenu
注意:

// 获取到所有的路由
routes=this.$router.options.routes

通常将这个路由分开，分为父组件和子组件
父组件：

<el-menu :default-active="$route.path" router>
<menuItem v-for="(item,index) in routes" :item="item" :key="index"></menuItem>
</el-menu>

子组件：

<div>
<!--这个表示有子菜单的情况下，才会显示-->
<el-submenu :index="item.path" v-if="item.children && item.children.length>0">
<template slot="title">
<i class="icon iconfont" :class="item.icon"></i>
<span slot="title">{{item.name}}</span>
</template>
<template v-for="(routePath,index) in item.children">
// **注意**这个表示判断子菜单下面是否还有三级和四级菜单
<menuItem :item="routePath" :key="index" v-if="routePath.children && routePath.children.length>0"></menuItem>
<el-menu-item v-else :index="item.path+'/'+routePath.path" :key="index">
<i class="icon iconfont" :class="routePath.icon"></i>
<span slot="title">{{routePath.name}}</span>
</el-menu-item>
</template>
</el-submenu>
<!--表示一级菜单-->
<el-menu-item v-else :index="item.path">
<i class="icon iconfont" :class="item.icon"></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>

**注意：**要在一个组件中，递归调用他自己需要在这个组件上面，要设置name名字。 在动态加载导航时，若一个标题是一个三级标题，那么他的path路径（是绝对路径）的组成是由：/（根路径）/一级标题路径/二级标题路径/三级标题路径组成。多级标题的path都是绝对路径，并且是路由出口

最后

以上就是积极小海豚为你收集整理的动态渲染NavMenu导航（vue-router）的全部内容，希望文章能够帮你解决动态渲染NavMenu导航（vue-router）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。