Vue 使用 van-tab 切换组件：动态渲染实现页面切换

"切换van-tab时从新渲染组件内容：在切换 van-tab 时重新渲染组件，可以使用 Vue 的动态组件来实现。\n\n首先，在父组件中定义一个变量来表示当前选中的 tab，例如：\n\nvue\n<template>\n <div>\n <van-tabbar v-model="activeTab">\n <van-tabbar-item icon="home-o">首页</van-tabbar-item>\n <van-tabbar-item icon="search">搜索</van-tabbar-item>\n <van-tabbar-item icon="star-o">收藏</van-tabbar-item>\n </van-tabbar>\n \n <component :is="activeTab"></component>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n activeTab: 'home' // 默认选中首页\n }\n }\n}\n</script>\n\n\n然后，在父组件中使用 <component> 标签来动态渲染子组件，通过 :is 属性来指定当前选中的 tab 对应的子组件。例如，在首页对应的子组件中可以定义为：\n\nvue\n<template>\n <div>\n <h1>首页</h1>\n <!-- 其他内容 -->\n </div>\n</template>\n\n<script>\nexport default {\n // 在子组件中可以添加其他逻辑和数据\n}\n</script>\n\n\n其他 tab 对应的子组件也可以类似地定义。\n\n这样，在切换 van-tab 时，会重新渲染对应的子组件，达到切换页面的效果。\n