vue切换tab页不刷新页面

Vue 切换 tab 页不刷新页面的实现可以使用 Vue 的条件渲染和组件复用。具体实现方式如下：

1. 在父组件中定义一个变量来控制当前显示的子组件：

<template>
  <div>
    <button @click="activeTab = 'tab1'">Tab1</button>
    <button @click="activeTab = 'tab2'">Tab2</button>
    <button @click="activeTab = 'tab3'">Tab3</button>
    <component :is="activeTab"></component>
  </div>
</template>

<script>
import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'
import Tab3 from './Tab3.vue'

export default {
  components: {
    Tab1,
    Tab2,
    Tab3
  },
  data() {
    return {
      activeTab: 'tab1'
    }
  }
}
</script>

2. 在子组件中使用 `v-if` 或 `v-show` 来控制组件是否显示：

<template>
  <div v-if="show">
    <!-- 子组件的内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  mounted() {
    this.show = true
  },
  beforeDestroy() {
    this.show = false
  }
}
</script>

在上面的代码中，子组件在 `mounted` 钩子函数中设置 `show` 为 `true`，表示组件已经渲染完毕，可以显示。在 `beforeDestroy` 钩子函数中设置 `show` 为 `false`，表示组件即将被销毁，需要隐藏。

这样，在父组件中切换 tab 页时，会根据 `activeTab` 的值来动态加载对应的子组件，而不会触发页面刷新。同时，子组件在渲染时会根据 `show` 的值来控制是否显示，从而实现了切换 tab 页不刷新页面的效果。