現在很多的后臺管理系統都采用tab選項卡的布局，左邊是導航欄固定，右邊是對應的頁面，每次點擊左邊的導航標題，只有右面的對應頁面再切換，而vue要做tab選項卡，推薦使用<router-link></router-link>實現a標簽的效果，然后使用<router-view></router-view>實現插槽的效果，把對應的頁面 "塞" 進去，具體實現看下面的案例：

1、這是tab選項卡的頁面，布局就不說了，主要是<router-link :to="a.url" :key="index" v-for="(a,index) in Data">{{a.title}}</router-link>，其中to指向你要跳轉的路徑，這是關鍵，而<router-view></router-view>就是最終其他子頁面要顯示的地方

<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>

2、路由配置

這個案例中，默認顯示的就是我tab選項卡的頁面，所以其他子頁面我就以這個頁面配置的子路由

如果有其他需求，就再需要的地方配置子路由即可

import Vue from 'vue'import Router from 'vue-router'// 首頁import Tab from "../pages/Tab"http:// 頁面一import PageOne from "../pages/PageOne"http:// 頁面二import PageTwo from "../pages/PageTwo"http:// 頁面三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      }    ]  } ]})