功能展示：
路由配置：
{ path: '/account', component: ()=> import('../components/home/home.vue'), //布局页面 redirect: '/account/all-account/list', //定向到list路径 name: '账号管理', children: [ { path: '/account/all-account/list', redirect: '/account/all-account/staff', //定向到staff路径 name: '员工管理', component: () => import('../components/view/account/index.vue'), children: [ { path: '/account/all-account/staff', component: () => import('../components/view/account/account.vue'), hidden: true }, { path: '/account/all-account/agent', name: '代理人账号', component: () => import('../components/view/account/agent.vue'), hidden: true }, { path: '/account/all-account/department', name: '部门设置', component: () => import('../components/view/account/department.vue'), hidden: true }, { path: '/account/all-account/role', name: '角色权限设置', component: () => import('../components/view/account/role.vue'), hidden: true }, { path: '/account/all-account/city', name: '城市管理', component: () => import('../components/view/account/city.vue'), hidden: true }, ] }, }
组件代码：
index.vue
<template> <div> <router-view /> </div> </template>
account.vue
<template> <!-- 账号管理tab分页 --> <div> <div v-if="isNative" > <div> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="员工账号"> <staff/> </el-tab-pane> <el-tab-pane label="代理人账号"> <agent/> </el-tab-pane> <el-tab-pane label="部门设置"> <department/> </el-tab-pane> <el-tab-pane label="角色权限设置"> <role/> </el-tab-pane> <el-tab-pane label="城市管理"> <city/> </el-tab-pane> </el-tabs> </div> </div> <div v-else> <router-view /> </div> </div> </template> <script> import staff from './staff' import agent from './agent' import department from './department' import role from './role' import city from './city' export default { components: { staff,agent,department,role,city }, data() { return { isNative: true, activeName: 'first' //默认先渲染第一个 } }, //页面初始默认是第一个板块展示 created() { if (this.$route.path === '/account/all-account/staff') { this.isNative = true } else { this.isNative = false } }, methods: { handleClick(tab, event) { console.log(tab, event) } } } </script> <style scoped> .page_container{ background: #ffffff; height: 100%; } </style> <style > #employeeCareMng .el-tabs__content { height:calc(100% - 55px); } </style>
其他tabs分页的组件：
staff.vue 其他类似
<template> <div> 员工账号 </div> </template> <script> export default { name:"staff", data(){ return { } }, created(){ }, methods: { }, }; </script> <style scoped>