今天小编就为大家分享一篇vue导航栏部分的动态渲染实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
根据公司项目的需求，使用的是element-ui的nav-menu组件实现动态渲染左侧导航条的功能，这里我只写到了四级菜单。
代码部分：
<i></i><span>{{item.alias}}</span><i class='iconfont icon-shenpi edit'></i> <i></i><span>{{item1.alias}}</span> <i></i><span>{{item2.alias}}</span> <i></i><span>{{item3.alias}}</span> <span>{{item4.alias}}</span> <span>{{item3.alias}}</span> <span>{{item2.alias}}</span> <span>{{item1.alias}}</span> <i></i><span>{{item.alias}}</span>
数据部分：
navMenu: [{ name: 'serveList', icon: 'iconfont icon-shezhi', alias: '金融服务目录', value: '', childs: [ { name: 'channelManage', icon: '', alias: '渠道管理', value: '', childs: [ { name: 'channelManage_in', icon: '', alias: '渠道内部管理', value: '', childs: [ { name: 'financial', icon: '', alias: '金融类', value: '/serveManage/financial', }, { name: 'no_financial', icon: '', alias: '非金融类', value: '/serveManage/no_financial', }, { name: 'query_class', icon: '', alias: '查询类', value: '/serveManage/query_class', }, { name: 'square_class', icon: '', alias: '冲正类', value: '/serveManage/square_class', }, ] }, { name: 'process_services', icon: '', alias: '流程服务', value: '/serveManage/process_services' }, { name: 'cooperation_services', icon: '', alias: '合作方服务', value: '/serveManage/cooperation_services' }, ] }, { name: 'saveManage', icon: '', alias: '风险管理', value: '/serveManage/saveManage' }, { name: 'manageDecision', icon: '', alias: '管理决策', value: '/serveManage/manageDecision' }, { name: 'businessSupport', icon: '', alias: '业务支持', value: '/serveManage/businessSupport' }, { name: 'technicalSupport', icon: '', alias: '技术支持', value: '/serveManage/technicalSupport' } ] }, { name: 'serveRelation', icon: 'iconfont icon-shezhi', al<i style="color:transparent">本文来源gaodai$ma#com搞$$代**码)网8</i>ias: '服务血缘关系', value: '/serveManage/serveRelation' }]
注意：因为含有childs的目录是没有路由的，所以可以把它的value值设为空。
效果展示：
这样我们就可以在其他页面引入该组件就可以了。
以上这篇vue导航栏部分的动态渲染实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持gaodaima搞代码网。
以上就是vue导航栏部分的动态渲染实例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue导航栏部分的动态渲染实例
转载请注明原文链接：vue导航栏部分的动态渲染实例
