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