vue子路由跳转实现tab选项卡

现在很多的后台管理系统都采用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"
// 页面一
import PageOne from "../pages/PageOne"								 
 1/3    1 2 3 下一页 尾页