大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
根据公司项目的需求,使用的是element-ui的nav-menu组件实现动态渲染左侧导航条的功能,这里我只写到了四级菜单。
创新互联建站于2013年成立,是专业互联网技术服务公司,拥有项目成都网站设计、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元济南做网站,已为上家服务,为济南各地企业和个人服务,联系电话:18980820575
代码部分:
{{item.alias}} {{item1.alias}} {{item2.alias}} {{item3.alias}} {{item4.alias}} {{item3.alias}} {{item2.alias}} {{item1.alias}} {{item.alias}}
数据部分:
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', alias: '服务血缘关系', value: '/serveManage/serveRelation' }]
注意:因为含有childs的目录是没有路由的,所以可以把它的value值设为空。
效果展示:
这样我们就可以在其他页面引入该组件就可以了。
以上这篇vue导航栏部分的动态渲染实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。