微客导航 » 文章资讯 » vue导航栏部分的动态渲染实例

vue导航栏部分的动态渲染实例

2023-08-10 01:12:04 178

根据公司项目的需求，使用的是element-ui的nav-menu组件实现动态渲染左侧导航条的功能，这里我只写到了四级菜单。

代码部分：





{{item.alias}}





{{item1.alias}}




{{item2.alias}}




{{item3.alias}}


{{item4.alias}}



{{item3.alias}}



{{item2.alias}}



{{item1.alias}}




{{item.alias}}

数据部分：

navMenu:[{
name:'serveList',
icon:'iconfonticon-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:'iconfonticon-shezhi',
alias:'服务血缘关系',
value:'/serveManage/serveRelation'
}]

注意：因为含有childs的目录是没有路由的，所以可以把它的value值设为空。

效果展示：

这样我们就可以在其他页面引入该组件就可以了。

以上这篇vue导航栏部分的动态渲染实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue导航栏部分的动态渲染实例

热门推荐

随机推荐