Vue 组件库vant的tabBar

1. 创建tabbar.vue

<template>
    <div>
        <router-view />
        <van-tabbar v-model="active">
            <van-tabbar-item
                v-for="(item,index) in tabbars"
                :key="index"
                :to="(item.name)"
            >
                <span>{{item.title}}</span>
                <img
                    slot="icon"
                    slot-scope="props"
                    :src="props.active ? item.active : item.normal"
                />
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import Vue from "vue";
export default {
    name: "tabbar",
	data() {
		return {
			active: 0,
			tabbars: [
				{
					name: "/",
					title: "首页",
					normal: "http://test2.h-etrip.com/app/assets/img/TabsHome.png",
					active: "http://test2.h-etrip.com/app/assets/img/TabsHomeFocus.png"
				},
				{
					name: "/scenic/2190",
					title: "景点",
					normal: "http://test2.h-etrip.com/app/assets/img/TabsTravel.png",
					active: "http://test2.h-etrip.com/app/assets/img/TabsTravelFocus.png"
				},
				{
					name: "/face",
					title: "我的",
					normal: "http://test2.h-etrip.com/app/assets/img/TabsFace.png",
					active: "http://test2.h-etrip.com/app/assets/img/TabsFaceFocus.png"
				}
			]
		};
	},
	methods: {

	},
	// 通过路由跳转判断选中的样式
	created() {
		if (this.$route.name == "/") {
			this.active = 0;
		} else if (this.$route.name == "scenic") {
			this.active = 1;
		} else if (this.$route.name == "face") {
			this.active = 2;
		}
	}
};
</script>

<style lang="less" scoped>
.van-tabbar {
	border-top: 1px solid #f5f5f5;
}
</style>

2. 引用tabbar

// 在首页页面引入
<template>
  <div class="home">
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from "@/components/tabbar.vue";
export default {
  components: {
    tabbar
  },
  name: "home",
  data() {
    
  },
  mounted() {
    
  },
  methods: {
  
  };
</script>