做出效果如下

微信截图_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:'内衣'},
                    {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级路由关系，所以在home路由下创建以下子路由

微信截图_20181109011713.png

然后在路由配置项中进行配置

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'}
            ]
        },

解释代码难点部分

1.ly-tab这个上面各种看不懂的东西，都是组件自己要求配置的选项，比如v-model:'selectedID'，就是组件规定选中的哪个地方的东西，0就是默认选中第一个，option配置的是选中时字体的颜色
2.@change="handleChange" @change是组件规定的方法，后面方法名字自己定义即可，方法默认自带两个参数，一个item是选中的项，一个index是选中的索引