需求：

获取路由中的参数值，根据参数值 初始化active的值，效果如下

初始代码：

<van-tabs v-model:active="active" @click="onClick" swipeable title-active-color="#4EC8F2" line-width="19" line-height="2">
	<van-tab v-for="(item, index) in tabs" :key="index" :title="item">
		这是内容
	</van-tab>
</van-tabs>

import { useRoute } from 'vue-router'
export default {
  setup () {
    const route = useRoute();
    const state = reactive({
      active: route.query.v ? route.query.v : 0, 
    })
    return {
      ...toRefs(state)
    }
  }
}

打印发现 active 的值打印结果是2，但是 tab 的选中状态还是 0

问题在于：

• van-tabs，里面的 v-model 默认值是0，但是类型却写着 number | string
• 但是，在此时赋值给 v-model = " active " 的时候，active的值需要是number类型，才有效，否则再怎么设置都是无效的

修改后的代码：

import { useRoute } from 'vue-router'
export default {
  setup () {
    const route = useRoute();
    const state = reactive({
      active: Number(route.query.v) ? Number(route.query.v) : 0,  // 转换为number类型
    })
    return {
      ...toRefs(state)
    }
  }
}