关于vue中使用vant tabbar组件刷新不高亮问题，完美解决

不二家大哥哥

已于 2023-01-30 11:20:15 修改

阅读量1.1k

点赞数

文章标签： vue.js javascript 前端

于 2022-12-20 11:06:03 首次发布

本文链接：https://blog.csdn.net/weixin_45266081/article/details/128382115

版权

引入router对象

import { useRouter } from "vue-router";

这里用的是vant ui

 <van-tabbar :placeholder="true" v-model="active">
      <template v-for="item in icon" :key="item.id">
        <van-tabbar-item replace :to="item.path" v-if="item.isShow">
          <span>{{ item.signName }}</span>
          <template #icon="props">
            <img :src="props.active ? item.activeImg : item.inactiveImg" />
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>

let data = reactive({
      active: 0,
      icon: [
        {
          signName: "待拜访记录",
          activeImg: require("../assets/tabbar/8.jpg"),
          inactiveImg: require("../assets/tabbar/7.jpg"),
          isShow: true,
          id: "001",
          path: "/home",
        },
        {
          signName: "审批列表",
          activeImg: require("../assets/tabbar/4.jpg"),
          inactiveImg: require("../assets/tabbar/3.jpg"),
          isShow: true,
          id: "002",
          path: "/stage",
        },
      ],
    });

    watch(
      () => router.currentRoute.value.path,
      (path) => {
        const i = data.icon.findIndex((item) => item.path === path);
        if (i !== -1) {
          localStorage.setItem("active", i);
          data.active = i;
        } else {
          data.active = localStorage.getItem("active") * 1;
        }
      },
      { immediate: true, deep: true }
    );

利用wach来进行监听，当路由我所需要的页面时候进行存储并高亮，调详情或者表单时候，存储之前保存的值