item-management-vant/src/components/Tabbar.vue

<template>
  <div>
    <van-tabbar v-model="active" @change="onChange()">
      <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="todo" icon="edit">待办</van-tabbar-item>
      <van-tabbar-item name="start" icon="guide-o">发起</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
  
<script>
import { mapStores } from 'pinia';
import { tabStore } from '@/stores/tabStore';

export default {
  props: {},
  data() {
    return {
      active: 'home',
    };
  },
  computed: {
    ...mapStores(tabStore),
  },
  created() {
    // 判断缓存中有没有存储激活的页面, 没有默认home
    if (this.tabStore.tabInfo) {
      this.active = this.tabStore.tabInfo;
    }
  },
  methods: {
    // 导航切换
    onChange() {
      console.log(this.active);
      this.tabStore.setTabInfo(this.active);
      switch (this.active) {
        case 'home':
          this.$router.push('/index/home/index');
          break;
        case 'todo':
          this.$router.push('/index/home/todo');
          break;
        case 'start':
          this.$router.push('/index/home/start');
          break;

        default:
          break;
      }
    },
  },
};
</script>