现在很多的后台管理系统都采用tab选项卡的布局，左边是导航栏固定，右边是对应的页面，每次点击左边的导航标题，只有右面的对应页面再进行切换，而vue要做tab选项卡，推荐使用实现a标签的效果，然后使用实现插槽的效果，把对应的页面 "塞" 进去，具体实现看下面的案例：

• 这是tab选项卡的效果，布局就不多说了，主要是{{a.title}}，其中to是指向你要跳转的路径，这是关键，而就是最终其他子页面要显示的地方

<template>    <div  class="index-box">        <nav>            <h1>导航h1>                        <router-link :to="a.url" :key="index" v-for="(a,index) in Data">{{a.title}}router-link>        nav>        <div class="content">                        <router-view>router-view>        div>     div>template> <script>    import navData from "../../static/data/nav"    export default {        name: "Index",        data(){            return {                Data:[]            }        },        methods:{            init(){                this.Data = navData.navData;            }        },        created(){            this.init();        }    }script> <style scoped>    /* 容器 */    .index-box{        width: 100%;        height: 100%;        background: #212224;        display: flex;    }    /* 左侧导航条 */    nav{        width: 260px;        height: 100%;        background: #323437;        overflow: hidden;        float: left;    }    /* 导航 */    nav h1{        color: #f2ffff;        margin: 10px 0 10px 10px;    }    /* 导航标题 */    nav a{        display: block;        width: 100%;        height: 45px;        color: #f2ffff;        background: #2e3033;        padding-left: 10px;        line-height: 45px;        font-size: 20px;        margin-bottom: 10px;    }    /* 右侧内容 */    .content{        flex: 1;        padding: 20px;    }style>

• 路由配置：这个案例中，默认显示的就是我tab选项卡的页面，所以其他子页面我就以这个页面配置的子路由。如果有其他需求，在需要的地方配置子路由即可

import Vue from 'vue'import Router from 'vue-router'// 首页import Tab from "../pages/Tab"// 页面一import PageOne from "../pages/PageOne"// 页面二import PageTwo from "../pages/PageTwo"// 页面三import PageThree from "../pages/PageThree" Vue.use(Router); export default new Router({  routes: [    {        // 默认显示的页面        path: '/',        name: 'Tab',        component: Tab,        children:[            {                    // 子路由中默认显示的页面                path: '',                name: 'PageOne',                component: PageOne            },            {                path: 'PageTwo',                name: 'PageTwo',                component: PageTwo            },            {                path: 'PageThree',                name: 'PageThree',                component: PageThree            }        ]    }  ]})

这里再提供一种场景：比如我默认显示的是登录页面，登录进入后是首页，是tab选项卡的布局，所以我只要给首页配置子路由就可以了

import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld'// 首页框架import Index from "../pages/Index";// 首页import FunctionsIndex from "../components/Functions/FunctionsIndex";// 数据源列表import FunctionsDbSource from "../components/Functions/FunctionsDbSource"// 角色管理import FunctionsRoleManagement from "../components/Functions/FunctionsRoleManagement"// 登录import Login from "../pages/Login"Vue.use(Router);  export default new Router({  linkExactActiveClass: "act",  mode: "history",  routes: [    {      //  首页      path: '/Index',      name: 'Index',      component: Index,      children: [        {          //  首页中默认显示统计页面          path: '',          name: 'Total',          component: FunctionsIndex        },        {          path: 'DbSource',          name: 'DbSource',          component: FunctionsDbSource        },        {          path: 'RoleManagement',          name: 'RoleManagement',          component: FunctionsRoleManagement        }      ]    },      // 默认显示登录页面    {      path: '/',      name: 'Login',      component: Login    }  ]})

• 配置json文件：因为每个系统，侧边栏的导航标题都不一样，而且也不能保证后期不会再加，所以我推荐把导航标题提出来，到时候只要v-for循环就可以了(循环具体操作返回上面看第一个代码块)，然后在选项卡页面引入json，在vue方法中把它赋值给data中的变量，创建后调用方法即可，之后再增加导航标题，只需要在json中增加即可

{  "navData":[    {      "title":"子页一",      "url":"/"    },    {      "title":"子页二",      "url":"/PageTwo"    },    {      "title":"子页三",      "url":"/PageThree"    }  ]}

• 页面效果：之后写好其他页面，就能实现这个效果了

<template>    <h1>这是子页一，默认显示h1>template> <script>    export default {        name: "PageOne"    }script> <style scoped>    h1{        color: #f2ffff;    }style>

效果图：

再追加一个上面所说的默认是登录页面，然后登录成功后显示首页的tab选项卡的效果图，因为没开数据库，我就模拟演示一下,手动登录成功进入主页：

好了，以上就完成了一个简单的tab选项卡布局，大家去试试吧。

期待能够对你有所帮助~~~