做出效果如下

微信截圖_20181109005128.png

我們需要用到一個第三方插件

npm i ly-tab -S

因為這個插件是在全局中使用的，因此需要在全局的main.js文件下引入

import LyTab from 'ly-tab'
Vue.use(LyTab);

因為只有在Home這個頁面上才有用到，所以我們在Home這個路由上配置即可

<template>
    <div class="home">
        <ly-tab
         v-model="selectedId"
         :items="items"
         :options="options"
         

         class="fix"
        />
        <router-view></router-view>
    </div>
</template>

<script>

    export default{
        name:"Home",
        data(){
            return{
                selectedId:0,
                items:[
                    {label:'熱門'},
                    {label:'服飾'},
                    {label:'鞋包'},
                    {label:'母嬰'},
                    {label:'百貨'},
                    {label:'食品'},
                    {label:'內(nèi)衣'},
                    {label:'男裝'},
                    {label:'電器'}
                ],
                options:{
                    activeColor:'#e9232c',
                },
                subRouteUrl:['/home/hot','/home/dress','/home/box',
                '/home/mbaby','/home/general','/home/food','/home/shirt',
                '/home/man','/home/ele']
            }
        },
        methods:{
            handleChange(item,index){
                this.$router.replace(this.subRouteUrl[index]);
            }
        }
    }


</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
.home
    background #f5f5f5
    width 100%
    height 100%

    .fix
        position fixed
        left 0
        top 0
        z-index 998
</style>

因為存在2級路由關(guān)系，所以在home路由下創(chuàng)建以下子路由

微信截圖_20181109011713.png

然后在路由配置項中進(jìn)行配置

import Hot from './../pages/Home/Children/Hot/Hot'
import Dress from './../pages/Home/Children/Dress'
import Ele from './../pages/Home/Children/Ele'
import Food from './../pages/Home/Children/Food'
import General from './../pages/Home/Children/General'
import Box from './../pages/Home/Children/Box'
import Man from './../pages/Home/Children/Man'
import Mbaby from './../pages/Home/Children/Mbaby'
import Shirt from './../pages/Home/Children/Shirt'

export default new VueRouter({
    //3.1 配置一級路由
    routes:[
        {
            path:'/home',
            component:Home,
            children:[
                {path:'hot',component:Hot},
                {path:'box',component:Box},
                {path:'dress',component:Dress},
                {path:'ele',component:Ele},
                {path:'food',component:Food},
                {path:'general',component:General},
                {path:'man',component:Man},
                {path:'shirt',component:Shirt},
                {path:'mbaby',component:Mbaby},
                {path:'/home',redirect:'/home/hot'}
            ]
        },

解釋代碼難點(diǎn)部分

1.ly-tab這個上面各種看不懂的東西，都是組件自己要求配置的選項，比如v-model:'selectedID'，就是組件規(guī)定選中的哪個地方的東西，0就是默認(rèn)選中第一個，option配置的是選中時字體的顏色
2.@change="handleChange" @change是組件規(guī)定的方法，后面方法名字自己定義即可，方法默認(rèn)自帶兩個參數(shù)，一個item是選中的項，一個index是選中的索引