切换标签 页面不刷新

为了实现标签切换而不刷新页面，可以使用Vue.js框架中的动态组件。动态组件可以根据当前组件的状态动态地切换到不同的组件，而不需要刷新整个页面。下面是一个简单的示例：

1. 在模板中定义标签和对应的组件：

<template>
  <div>
    <ul>
      <li @click="currentTab = 'tab1'">Tab 1</li>
      <li @click="currentTab = 'tab2'">Tab 2</li>
      <li @click="currentTab = 'tab3'">Tab 3</li>
    </ul>
    <component :is="currentTab"></component>
  </div>
</template>

2. 在脚本中定义当前标签和对应的组件：

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

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

在上面的示例中，我们定义了三个标签和对应的组件Tab1、Tab2和Tab3。当用户点击标签时，我们将currentTab属性设置为对应的标签名称，然后使用动态组件来渲染对应的组件。