vue实现tabbar功能

要写一个小项目，tabbar要重用因而独立出组件，遇到不少坑，赶紧记录下来：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<template>     <div class="tab">         <div class="tabItem">             <router-link class="tabTo" to="/">                 <img class="tabImg" src="static/home.png">                 <div class="tabText">首页</div>             </router-link>             <router-link class="tabTo" to="/notice">                 <img class="tabImg" src="static/home.png">                 <div class="tabText">通知</div>             </router-link>             <router-link class="tabTo" to="/my">                 <img class="tabImg" src="static/home.png">                 <div class="tabText">我的</div>             </router-link>         </div>     </div> </template>

　先把页面代码写出来，之后把变量提出来：　

?

1 2 3 4 5 6 7 8 9 10

<template>     <div class="tab">         <div v-for="item in tabData" :key="item.name" class="tabItem">             <router-link class="tabTo" :to="item.path">                 <img class="tabImg" :src="item.img">                 <div class="tabText">{{item.name}}</div>             </router-link>         </div>     </div> </template>

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

tabData: [           {             path: '/',             img: 'static/home.png',             name: '首页'           },           {             path: '/notice',             img: 'static/notice.png',             name: '通知'           },           {             path: '/my',             img: 'static/my.png',             name: '我的'           }         ]

　　,变量提出来以后，点击肯定要有效果的比如字体变色，背景图片变换。增加了一个class（.active）,数组各增加一张点击后的背景图片

tabData: [
          {
            path: '/',
            img: 'static/home.png',
            activeImg: 'static/homeActive.png',
            name: '首页'
          },
          {
            path: '/notice',
            img: 'static/notice.png',
            activeImg: 'static/noticeActive.png',
            name: '通知'
          },
          {
            path: '/my',
            img: 'static/my.png',
            activeImg: 'static/myActive.png',
            name: '我的'
          }
        ]

之后就要实现切换的效果了，照我预想是点击包裹图片和文字的容器，点击后，根据点击的下标知道点击哪一个，更换背景，增加class：active，顺便把点击和路由跳转写一起了，

<template>
    <div class="tab">
        <ul v-for="(item, imdex) in tabData" :key="item.name" class="tabItem">
            <li class="tabTo" @click="tabClick(item.path,index)">
                <img class="tabImg" :src="activeIndex== index?item.activeImg:item.img">
                <div :class="{'active':activeIndex== index}"  class="tabText">{{item.name}}</div>
            </li>
        </ul>
    </div>
</template>

  export default {
    name: 'TabBar',
    data: function () {
      return {
        activeIndex: 0,
        tabData: [
          {
            path: '/',
            img: 'static/home.png',
            activeImg: 'static/homeActive.png',
            name: '首页'
          },
          {
            path: '/notice',
            img: 'static/notice.png',
            activeImg: 'static/noticeActive.png',
            name: '通知'
          },
          {
            path: '/my',
            img: 'static/my.png',
            activeImg: 'static/myActive.png',
            name: '我的'
          }
        ]
      }
    },
    methods: {
      tabClick: function (path,index) {
        this.activeIndex=index
        this.$router.push(path)
      }
    }
  }

逻辑没问题吧，一运行就傻了，点击以后只有字会变颜色，再次点击才会背景图片才会变色，左改又改还是不行，很多文章都说是这个思路啊，微信小程序也是这个思路啊。经人提醒把根据下标切换状态，改成根据路由变化更改状态，竟然解决了，虽然有点不求甚解，先记录下来咯，最后变成了这样

<template>
    <div class="tab">
        <ul v-for="item in tabData" :key="item.name" class="tabItem">
            <li class="tabTo" @click="tabClick(item.path)">
                <img class="tabImg" :src="item.path== $route.path?item.activeImg:item.img">
                <div :class="{'active':item.path== $route.path}"  class="tabText">{{item.name}}</div>
            </li>
        </ul>
    </div>
</template>

  export default {
    name: 'TabBar',
    data: function () {
      return {
        tabData: [
          {
            path: '/',
            img: 'static/home.png',
            activeImg: 'static/homeActive.png',
            name: '首页'
          },
          {
            path: '/notice',
            img: 'static/notice.png',
            activeImg: 'static/noticeActive.png',
            name: '通知'
          },
          {
            path: '/my',
            img: 'static/my.png',
            activeImg: 'static/myActive.png',
            name: '我的'
          }
        ]
      }
    },
    methods: {
      tabClick: function (path) {
        this.$router.push({path: '.' + path})
      }
    }
  }
</script>

最后效果