shujuju/boman-h5/src/components/common/Navbar.vue

<template>
  <div class="NavBar" id="NavBar">
		  <van-tabbar  v-model="tabbarTempValue" @change="onChange"  >
		    <van-tabbar-item   icon="wap-home">首页</van-tabbar-item>
		    <van-tabbar-item  icon="comment">工作台</van-tabbar-item>
		    <van-tabbar-item   icon="manager">个人中心</van-tabbar-item>
		  </van-tabbar>
          <router-view></router-view>
          <!-- <router-view />
        <van-tabbar v-model="tabbarTempValue">
            <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';
import VueRouter from 'vue-router';
export default {
    props: {
    active: Number
  },
  name:'NavBar',
    data() {
        return {
            imgUrl:'',
			tabbarTempValue: this.active,
            tabbars: [
				{
					name: "/",
					title: "首页",
					normal: "http://test2.h-etrip.com/app/assets/img/TabsHome.png",
					active: "../../assets/img/icon_tab_hp_selected.png"
				},
				{
					name: "/workbench",
					title: "工作台",
					normal: "http://test2.h-etrip.com/app/assets/img/TabsTravel.png",
					active: "http://test2.h-etrip.com/app/assets/img/TabsTravelFocus.png"
				},
				{
					name: "/user",
					title: "我的",
					normal: "http://test2.h-etrip.com/app/assets/img/TabsFace.png",
					active: "http://test2.h-etrip.com/app/assets/img/TabsFaceFocus.png"
				}
			]
        }
    },
    created() {
          //由于 vant 标签栏路由模式，无法自动加载页面，所以这里需要初始化
            console.log(this.$route);//打印当前路由属性
            // if (this.$route.path === '/') {
            //     this.$router.push('/home');
            // }
        },
    methods:{
        async NavInit() {
            if(localStorage.getItem('token')){
            const res = await this.$http.get('/user/' + localStorage.getItem('id'))
            this.imgUrl = res.data[0].user_img
            }
        },
       
		onChange(index){
			console.log(index)
            this.tabbarTempValue = 0
            // this.active = index
            // console.log(this.tabbarTempValue)
            if(index == 0){
             this.$router.push("/home");
            }else if(index == 1){
                this.$router.push("/workbench");
            }else{
              this.$router.push("/user");
            }
            
		}
    },
    mounted() {
        // this.NavInit()
    }
}
</script>

<style scoped lang="less">
.NavBar{

}
</style>