vue 循环tabs 标签页 组件_Vue+Element循环显示Tabs 标签页，并且点击每一个标签页重新加载该页面，请求页面接口...

说明:

menuList是导航数组，使用el-menu加载就行，这里根据项目结构需要，将二级菜单分开，在内容页显示

代码示例中props传值menuList，本示例使用父子组件传值的方式

另外本示例程序使用的是vue3版本，页面路径根据每个人项目文件自行更改使用

一、基础工作

1、数组实例

menuList=[

icon: "el_icon icon-system",

link: "/systemSet",

name: "系统设置",

list:[

{

flag: false,//控制子组件显示，点击时重新请求接口

link: "account",

name: "账号设置",

},

{

flag: false,

link: "role",

name: "角色设置",

}

]

]

2、在components中新建secondaryMenu.vue，作为二级显示的公用组件

3、在views中新建systemSet文件夹，再新建components作为存放公用文件，然后在components中新建文件systemTemplate.vue，示例如下：

image.png

二、代码示例

1、systemTemplate.vue