移动触摸回弹插件：ly-tab

GitHub：https://github.com/ScoutYin/ly-tab
npm：https://www.npmjs.com/package/ly-tab

这是一个移动端的自适应滑动Vue导航栏组件，有一定实用性，大家可能会用得到（当然有些大佬自己写得更好的话就没必要了） ，有需要的可以在项目中 npm install ly-tab -S 或者 yarn add ly-tab 使用

具体代码：

<template>
  <div class="home">
    <!-- 全局引用的ly-tab在这里调用这个组件 -->
    <!-- 把设置好的组件参数与数据进行传入 -->
    <!-- @change="handleChange"给每个元素添加上点击事件 -->
    <ly-tab v-model="selectedId" :items="items" :options="options" @change="handleChange"/>
    <!-- 所有的二级路由组件统一在router/index.js里注册，这里只需要写上router-view就可以进行展示了 -->
    <!-- 在router/index.js里注册的组件统一在router-view里面进行展示 -->
    <router-view/>
  </div>
</template>
<script>
// 配置玩了所有的二级路由，但是ly-tab这个组件怎么去绑定路由跳转呢     发起问题
// 解决方法       @change="handleChange
export default {
  name:'Home',
  data() {
    return {
      selectedId:0,   //代表选中的id，为0，一开始进入页面就显示数组的第0位啊
      items:[
        {label: '热门'},
        {label: '服饰'},
        {label: '鞋包'},
        {label: '母婴'},
        {label: '百货'},
        {label: '食品'},
        {label: '内衣'},
        {label: '男装'},
        {label: '电器'}
      ],  //所要展示的东西，但要以对象的形式传入
      options:{
        activeColor:"#008792"  //设置选中颜色
      },
      // 二级路由路径
      subRouteUrl: [
        '/home/hot', 
        '/home/dress', 
        '/home/box', 
        '/home/mbaby', 
        '/home/general', 
        '/home/food', 
        '/home/shirt', 
        '/home/man', 
        '/home/ele'
      ]
    }
  },
  methods:{
    // ly-tab组件的绑定事件函数
    handleChange(item,index){
      // console.log(item,index)        index为一个下标，通过定义的数组，取出对应下标的路由地址进行跳转
      // console.log(this.$router)
      //跳转到指定的路径this.$router.replace()
      // this.$router.replace('/me')        例如  这样就可以跳转到/me页面，就是个人中心页面
      this.$router.replace(this.subRouteUrl[index])
      console.log(this.$route);
    }
  },
  created() {
    // console.log(this.$router)
  },
};
</script>

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

index.js配置路由和以往也是不太一样的方法，顺便摘录一下

export default  new VueRouter({
  //  3.1配置一级路由
  routes: [
    {
      path:'/home',
      component:Home,
      //  配置home里面的二级路由
      children: [
        //  二级路由这样写不用加/斜杠
        // 热门版块
        {path: 'hot', component: Hot},
        // 服饰版块
        {path: 'dress', component: Dress},
        // 鞋包版块
        {path: 'box', component: Box},
        // 母婴版块
        {path: 'mbaby', component: Mbaby},
        // 百货版块
        {path: 'general', component: General},
        // 食品版块
        {path: 'food', component: Food},
        // 内衣版块
        {path: 'shirt', component: Shirt},
        // 男装版块
        {path: 'man', component: Man},
        // 电器版块
        {path: 'ele', component: Ele},
        // 用户访问/home，就默认展示/home/hot
        {path: '/home',redirect: '/home/hot'}
      ]
    },
    {path:'/chat',component:Chat},
    {path:'/me',component:Me},
    {path:'/search',component:Search},
    {path:'/recommend',component:Recommend},
    {path:'/',redirect:'/home'}
  ]
})