vant底部导航-动态选择图片

<template>
  <div id="app">
    <router-view class="niam" />
    <van-tabbar
      v-if="$route.meta.keepAlive"
      route
      v-model="active"
      inactive-color="rgba(216, 216, 216, 1)"
      active-color="rgba(51, 51, 51, 1)"
    >
      <van-tabbar-item v-for="(item,index) in tabbars" :key="index" :to="{path:item.path}">
        <span class="tab-Title">{{item.title}}</span>
        <img
          v-if="index==2"
          style="height:0.35rem;width:0.35rem;position:relative;top:0.02rem;"
          slot="icon"
          slot-scope="props"
          :src="props.active ? item.active : item.normal"
        />
        <img v-else slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "App",
  created() {
    localStorage.setItem("isAdministrator", 1);
  },
  data() {
    return {
      active: 0,
      tabbars: [
        {
          path: "/project",
          title: "项目",
          normal: require("./assets/imgs/tabbar/project.png"),
          active: require("./assets/imgs/tabbar/project1.png")
        },
        {
          path: "/message",
          title: "消息",
          normal: require("./assets/imgs/tabbar/apply.png"),
          active: require("./assets/imgs/tabbar/apply1.png"),
        },
        {
          path: "/project_add",
          // title: "添加项目",
          normal: require("./assets/imgs/tabbar/add.png"),
          active: require("./assets/imgs/tabbar/add.png")
        },
        {
          path: "/date",
          title: "数据",
          normal: require("./assets/imgs/tabbar/date.png"),
          active: require("./assets/imgs/tabbar/date1.png")
        },
        {
          path: "/me",
          title: "我的",
          normal: require("./assets/imgs/tabbar/me.png"),
          active: require("./assets/imgs/tabbar/me1.png")
        }
      ]
    };
  }
};
</script>