介绍 const routes =, (
,{
,名字:& # 39;回家# 39;
,路径:& # 39;/回家# 39;
,元:{,文字:& # 39;首页& # 39;,}
},
,{
,名字:& # 39;内部# 39;
,路径:& # 39;/内部# 39;
,元:{,文字:& # 39;内部平台& # 39;,},
,孩子们:[
{才能
,,名字:& # 39;oa # 39;
,,路径:& # 39;oa # 39;
元才能:{,文字:& # 39;oa # 39;,}
,,},
{才能
,,名字:& # 39;jira # 39;
,,路径:& # 39;jira # 39;
元才能:{,文字:& # 39;jira # 39;,}
,,},
{才能
,,名字:& # 39;维基# 39;
,,路径:& # 39;维基# 39;
元才能:{,文字:& # 39;维基# 39;,}
,,},
{才能
,,名字:& # 39;caiwu& # 39;
,,路径:& # 39;caiwu& # 39;
元才能:{,文字:& # 39;财务& # 39;,},
,,孩子们:[
,,{
,,,的名字:& # 39;chailv& # 39;
,,,路径:& # 39;chailv& # 39;
,,,元:{,文字:& # 39;差旅& # 39;,}
,,},
,,{
,,,的名字:& # 39;“# 39;
,,,路径:& # 39;“# 39;
元:,,,{,文字:& # 39;日常& # 39;,},
,,,孩子们:[
,,,{
,,,的名字:,& # 39;出租车# 39;
,,,路径:,& # 39;出租车# 39;
元:,,,,{,文字:& # 39;交通& # 39;,}
,,,},
,,,{
,,,的名字:,& # 39;电话# 39;
,,,路径:,& # 39;电话# 39;
元:,,,,{,文字:& # 39;通信& # 39;,}
,,,}
,,,)
,,}
,,)
,,}
,)
},
,{
,名字:& # 39;证交会# 39;
,路径:& # 39;/秒# 39;
,元:{,文字:& # 39;审核& # 39;,},
,孩子们:[
{才能
,,名字:& # 39;acl # 39;
,,路径:& # 39;/acl # 39;
元才能:{,文字:& # 39;acl # 39;,}
,,}
,)
,}
) render (r), {
,return r (
& # 39;才能el-menu& # 39;
{才能
,,道具:{
,才能写成backgroundColor:“# 545 c64"
,,,输入textColor:“# fff",
,,,activeTextColor:“# ffd04b"
,,},
,,:{
,才能选择:this.onSelect
,,}
,,},
this.elements才能(this.routes, r)
,)
以前,} elements (路线,,r), {
return 才能路线
,,. map (route =祝辞,{
,,if (! route.paths), route.paths =, []
,,if (route.children ,,, route.children.length), {
,,return r (
,,,& # 39;el-submenu& # 39;
,,,{
,,,道具:,{
,,,,指数:route.name
,,,}
,,,},
,,,(
,,,r (
,,,,& # 39;跨度# 39;
,,,,{
,,,,槽:,& # 39;标题# 39;
,,,,},
,,,,(
,,,route.meta.text
,,,,)
,,,),
,,,this.elements (route.children,, r)
,,,)
,,,)
,,},else if (route.path), {
,,return r (
,,,& # 39;el-menu-item& # 39;
,,,{
,,,道具:,{
,,,,指数:route.name
,,,}
,,,},
,,,(
,,route.meta.text
,,,)
,,,)
,,},{else
,,return null
,,}
})才能
.filter才能(item =祝辞,项)
之前,}
怎么在Vue中利用递归实现树形菜单?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
数据结构:vue-router的数据结构
<强>组件实现:
先看看呈现函数,其中包含一个递归函数元素:
元素函数:
Vue的优点
Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。
看完上述内容,你们掌握怎么在Vue中利用递归实现树形菜单的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!
