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

2019-11-19 11:08:40

字体：大中小

来源：转载

供稿：网友

现在很多的后台管理系统都采用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"// 页面二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  } ]})

3、配置json文件

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

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

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

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

效果图：