Vant3 - click on the corresponding name name to jump to the next page corresponding to the location of the name of the TAB bar

Vant—— tab 点击对应的nameThe name jumps to the corresponding one on the next pagetab栏的name的位置

First of all, we need to configure the corresponding data structure for the previous page

这里是通过Pinia去写 ️

myfileStore.ts

<div v-for="(item,index) in store.list" :key="index" @click="onList(item,index)"></div>

    const onList = (item: any, index: Number) => {
    
      router.push({
    
        // path: "/IndexFill",
        path: item.path,
        query:{
    
          name:item.name  // put the clickedname传给下一个页面
        }
      });
    };

IndexFill.vue

    /* 这里需要把activeNameBind as in the previous pagequery中的name的值 */
    <van-tabs v-model:active="activeName" swipeable @change="change">
    /* 通过动态nameto get the traverseditem.name即可 */
      <van-tab v-for="(item,index) in store.list" :name="item.name" :title="item.title" :key="index">

      </van-tab>
    </van-tabs>

<script lang='ts'>
import {
     useRoute } from "vue-router";
import {
     onMounted, ref } from "vue";
import {
     myfileStore } from "../store/module/myfileStore"; // Deconstruction just putPinia中的store
export default {
    
  name: "",
  setup() {
    
    const store = myfileStore();
    const route = useRoute();
    const name = route.query;
    /* 直接通过refGenerate initializedactiveName */
    const activeName = ref(name.name);
    // console.log(activeName)
    /* vant的滑动事件 */
    const change = (name: any) => {
    
      console.log(name);
    };
    return {
    
      change,
      onClickLeft,
      activeName,
      store,
      route,
      name,
    };
  },
};
</script>

A little attention to the dynamic herenameThe list in which to bind the loopname