Vant3—— 点击对应的name名称跳转到下一页对应的tab栏的name的位置

Vant—— tab 点击对应的name名称跳转到下一页对应的tab栏的name的位置

首先我们这里要给前一个页面配置相应的数据结构

这里是通过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  // 把点击后的name传给下一个页面
        }
      });
    };

IndexFill.vue

    /* 这里需要把activeName绑定为上个页面中的query中的name的值 */
    <van-tabs v-model:active="activeName" swipeable @change="change">
    /* 通过动态name去获取遍历后的item.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"; // 解构刚刚放在Pinia中的store
export default {
    
  name: "",
  setup() {
    
    const store = myfileStore();
    const route = useRoute();
    const name = route.query;
    /* 直接通过ref生成初始化的activeName */
    const activeName = ref(name.name);
    // console.log(activeName)
    /* vant的滑动事件 */
    const change = (name: any) => {
    
      console.log(name);
    };
    return {
    
      change,
      onClickLeft,
      activeName,
      store,
      route,
      name,
    };
  },
};
</script>

这里稍微注意一下动态的name要绑定循环的列表中的name