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

谁借莪１个温暖的怀抱￠ 2021-09-18 10:08 445阅读 0赞

现在很多的后台管理系统都采用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>

效果图：

![20190306103334113.gif][]

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

![20190306104246492.gif][]

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

如有问题，请指出，接受批评。

个人微信公众号：

![20200824121821553.png][]

[20190306103334113.gif]: /images/20210812/a3ebc9ce3c454623ab091aaf1a4c9210.png
[20190306104246492.gif]: /images/20210812/b76ec010b5d54d1ebfcc4b33e7c6ce0c.png
[20200824121821553.png]: /images/20210812/1d150789e27048b1ae97da2f069a9f96.png