Naive UI的标签页组件Tabs 切换标签保持位置

Tabs 组件是 Naive UI 中用来切换标签页的组件，如果想要在切换标签时保持位置，可以使用 `keep-alive` 组件来缓存组件状态。

具体来说，可以将 Tabs 组件嵌套在一个 `keep-alive` 组件中，这样在切换标签时，组件的状态会被缓存，不会被销毁，从而保持位置。

示例代码如下：

<template>
  <naive-tabs v-model="activeTab">
    <naive-tab-pane name="tab1">
      <!-- 内容1 -->
    </naive-tab-pane>
    <naive-tab-pane name="tab2">
      <!-- 内容2 -->
    </naive-tab-pane>
    <naive-tab-pane name="tab3">
      <!-- 内容3 -->
    </naive-tab-pane>
  </naive-tabs>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const activeTab = ref('tab1') // 默认选中第一个标签页
    return {
      activeTab
    }
  }
}
</script>

在这个示例中，我们将 Tabs 组件嵌套在 `keep-alive` 组件中，通过 `v-model` 双向绑定 `activeTab` 变量来控制当前选中的标签页。这样在切换标签页时，组件状态会被缓存，从而保持位置。