vue vant移动端 van-tab 来回切换页面 不把页面写到里面 如何写

<van-tabs type="card" @click="onClick"> 标签 单击事件
<van-tab title="a页面">代码</van-tab>我不想把代码写到里面去
<van-tab title="b页面">代码</van-tab>我不想把代码写到里面去
</van-tabs >
我是小白 想把代码提出来 切换标签 在<van-tabs>外的布局做切换

那就只当它做一个标签组件，点击切换component或路由

<van-tabs v-model="active" @click="handleTab">
  <van-tab v-for="item in tabList" :title="item.name"></van-tab>
</van-tabs>
<component :is="curCom"></component>

// script
import Component1 from '...'
...

data() {
  return {
    active: 0,
    tabList: [
      { name: '标签1', com: 'Component1' },
      { name: '标签2', com: 'Component2' },
      { name: '标签3', com: 'Component3' },
    ],
    curCom: 'Component1'
  }
},
methods: {
  handleTab(i) {
    this.curCom = this.tabList[i].com
  }
}

1.上面放router-view标签，下面放vant的tabbar组件，
2. tabar组件的每一项绑定跳转的路径，例如：<van-tabbar-item replace to="/Home">
就能实现下面是菜单栏，上面试内容区了。例如下面这样
望采纳 ^.^

<template>
  <!-- 主体内容区 -->
  <router-view/>

    <!-- 底部tab栏 -->
     <van-tabbar route class="tab-footer" >
        <van-tabbar-item replace to="/Home">首页</van-tabbar-item>
        <van-tabbar-item replace to="/Module">功能</van-tabbar-item>
        <van-tabbar-item replace to="/User">我的</van-tabbar-item>
    </van-tabbar>
</template>

可以用一个字段来控制显示，如下所示

      <van-tabs type="card" v-model="active"> 标签 单击事件
        <van-tab title="a页面">代码</van-tab>
        <van-tab title="b页面">代码</van-tab>
      </van-tabs >
      <div v-if="active==0">a页面的内容</div>
      <div v-if="active==1">b页面的内容</div>