vant 底部导航组件的实现（tabbar）

简单设计一个底部导航的功能组件

1.路由跳转

2.选项卡的原理

3.路由拦截

1<template>
2  <van-tabbar v-model="active" class="active_tab">
3    <van-tabbar-item
4      v-for="(item,index) in tabbars"
5      :key="index"
6      @click="tab(index,item.name)"
7    >
8      <span :class="currIndex == index ? active:''">{{item.title}}</span>
9      <template slot="icon" slot-scope="props">
10        <img :src="props.active ? item.active : item.normal">
11      </template>
12    </van-tabbar-item>
13  </van-tabbar>
14</template>
15
16<script>
17export default {
18  name: "tabbar",
19  data() {
20    return {
21      currIndex: 0,
22      active: 0,
23      tabbars: [
24        {
25          name: "home",
26          title: "首页",
27          normal: require("../common/icon/home.png"),
28          active: require("../common/icon/home_ac.png")
29        },
30        {
31          name: "category",
32          title: "分类",
33          normal: require("../common/icon/category.png"),
34          active: require("../common/icon/category_ac.png")
35        },
36        {
37          name: "message",
38          title: "消息",
39          normal: require("../common/icon/message.png"),
40          active: require("../common/icon/message.png")
41        },
42        {
43          name: "cart",
44          title: "购物车",
45          normal: require("../common/icon/cart.png"),
46          active: require("../common/icon/cart_ac.png")
47        },
48        {
49          name: "mine",
50          title: "我的",
51          normal: require("../common/icon/mine.png"),
52          active: require("../common/icon/mine_ac.png")
53        }
54      ]
55    };
56  },
57  methods: {
58    tab(index, val) {
59      this.currIndex = index;
60      this.$router.push(val);
61    }
62  }
63};
64</script>
65
66<style lang="scss" scoped>
67.active_tab img {
68  width: 26px;
69  height: 26px;
70}
71
72.van-tabbar-item--active {
73  color: #e10f02;
74}
75</style>