ly-tab第三方组件使用记录

应用场景，然后每个模块下面又有子模块，可左右拖动
下载安装：npm i ly-tab -S
main.js全局引入：import LyTab from ‘ly-tab’
注册使用：Vue.use(LyTab)

具体代码：

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