vue-router的TabBar的实现思路

vue-router的TabBar的实现思路

然后配置webpack.base.conf.js
这样做好改路径，不用写…/什么的。直接通过目录进行查找。

resolve: {
        //下面这句话可以用来省略后缀名
        extensions: ['.js', '.vue', '.json'],
        //这句话是别名的意思，可以用来配置路径用@代替src文件，然后再去找。
        alias: {
            //可以配置多个路径。这样在改变代码位置时，就不会报路径不对的错了
            '@': resolve('src'),
            'assets': resolve('src/assets'),
            'components': resolve('src/components'),
            'views': resolve('src/views')
        }
    },

组件MainTabbar.vue

<template>
   <tabbar>
      <!-- 里面传入颜色和路径 -->
      <tabbarItem path="/home" activeColor="deeppink">
        <img slot="item-icon" src="~assets/img/tabbar/_home.png" alt="">
        <img slot="item-icon-active" src="~assets/img/tabbar/home.png" alt="">
        <div slot="item-text">首页</div>
      </tabbarItem>
       <tabbarItem path="/category" activeColor="deeppink">
        <img slot="item-icon" src="~assets/img/tabbar/_img.png" alt="">
        <img slot="item-icon-active" src="~assets/img/tabbar/img.png" alt="">
        <div slot="item-text">分类</div>
      </tabbarItem>
       <tabbarItem path="cart" activeColor="deeppink">
        <img slot="item-icon" src="~assets/img/tabbar/_search.png" alt="">
        <img slot="item-icon-active" src="~assets/img/tabbar/search.png" alt="">
        <div slot="item-text">购物车</div>
      </tabbarItem>
       <tabbarItem path="my" activeColor="deeppink">
        <img slot="item-icon" src="~assets/img/tabbar/_my.png" alt="">
        <img slot="item-icon-active" src="~assets/img/tabbar/my.png" alt="">
        <div slot="item-text">我的</div>
      </tabbarItem>
    </tabbar>
</template>

<script>
import tabbar from  'components/tabbar/tabbar.vue'
import tabbarItem from 'components/tabbar/tabbarItem.vue'

export default {
    components: {
        tabbar,
        tabbarItem
    }

}
</script>

<style>

</style>

组件目录

组件tabbarItem.vue

<template>
  <div class="tab-bar-item" @click="itemClick">
    <!-- 外面包一层div用来保证在替换时，有一些属性不被替换 -->
    <div v-if="!isActive"><slot name="item-icon"></slot></div>
    <div v-else ><slot name="item-icon-active"></slot></div>
    <div :style="activeStyle"><slot name="item-text"></slot></div>
</div>
</template>

<script>
export default {
  props: {
     path: String,
     activeColor:{
       type:String,
       default:'red'
     }

  },
  data () {
    return {
      //isActive:false
    }
  },
  computed: {
    
    isActive(){
    //  /home->item1(/home) =true
    //  /home->item1(/category) =false
    //  /home->item1(/cart) =false
    //  /home->item1(/my) =false
    //如果活跃的路由存在我们props传递的path,indexOf检查字符串有没有出现，未出现返回-1
    return this.$route.path.indexOf(this.path) !== -1;
    },
    //放到标签里太复杂了，所以抽到计算属相之中或则methods里面
    activeStyle(){
      return this.isActive?{color:this.activeColor}:{}
    }
  },
  methods: {
    itemClick(){
      //用push还是replace看项目要求
      this.$router.replace(this.path).catch((err)=>err);
      console.log(1111);
    }
  }

}
</script>

<style>
.tab-bar-item {
  flex: 1;
  text-align: center;
  font-size: 14px;

  /* 一般移动端tabbar高度为49px */
  height: 49px;
}
.tab-bar-item img{
    height: 24px;
    width: 24px;
    margin-top: 3px;
    /* 这句话是改变图片与文字间隔的
    vertical-align: middle; */
    
}


</style>

组件tabbar.vue

<template>
  <div id="tab-bar">
    <slot></slot>

  </div>
</template>

<script>
export default {};
</script>

<style>
#tab-bar {
  display: flex;
  background-color: #f6f6f6;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px -3px 1px rgba(100, 100, 100, 0.2);
}



</style>

各路由界面

router中的index.js中配置路由相关信息

import Vue from 'vue'
import Router from 'vue-router'
//使用懒加载的方式加载组件
const Home = () =>
    import ('../view/home/Home.vue');
const Category = () =>
    import ('../view/category/category.vue');
const Cart = () =>
    import ('../view/cart/cart.vue');
const my = () =>
    import ('../view/my/my.vue');

//安装插件
Vue.use(Router)
    //这样导出和原来不一样。因为之前报错，所以这样写了
const router = new Router({
    routes: [{
            path: '',
            name: 'home',
            redirect: '/home'
                // component: HelloWorld
        },
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/category',
            name: 'category',
            component: Category
        },
        {
            path: '/cart',
            name: 'cart',
            component: Cart
        },
        {
            path: '/my',
            name: 'my',
            component: my
        }

    ]
})
export default router

在App.vue中

<template>
  <div id="app">
<router-view></router-view>
<main-tabbar></main-tabbar>
      </div>
</template>

<script>
import MainTabbar from './components/MainTabbar.vue'
export default {
  name: "App",
  components: {
    MainTabbar
  }
};
</script>

<style>
/* 引入公共样式 */
@import url("./assets/css/base.css");
</style>