浏览器刷新或者后退时怎么记住 NTabs 组件的子标签组件状态？

使用 Tabs 组件时一般会设置一个默认展示的 tab 子组件，当我们在非默认子组件刷新浏览器页面时，Tabs 组件将恢复到它默认的子组件。或者我们通过非默认子组件进入下一级路由后点击浏览器的返回按钮，页面将返回 Tabs 组件的默认子组件，而不是我们路由跳转前的那个非默认子组件。

<n-tabs default-value="comp1">
    <n-tab-pane tab="Comp 1" name="comp1">
        这是第一个子组件
    </n-tab-pane>
    <n-tab-pane tab="Comp 2" name="comp2">
        这是第二个子组件
        <n-button>去更深的页面</n-button>
    </n-tab-pane>
</n-tabs>

我们可以用 URL 哈希来解决这个问题。一般情况下，路由的哈希标签放在 URL 的最后面，通过 # 与 URL 相连。核心代码如下：

<script setup lang="ts">
    const route = useRoute()
    const router = useRouter()
    // 进入页面时，从路由哈希中读取子标签页名称，同时设置默认名称
    const tab = ref(route.hash === '' ? '#comp1' : route.hash)
    // 当用户点击子标签页时，将其名称同步到路由对象中，只修改路由哈希，其他参数保持不变即可
    watch(tab, v => router.replace({ ...route, hash: v }), {immediate: true})
</script>

<template>
<n-tabs v-model:value="tab">
    <n-tab-pane tab="Comp 1" name="#comp1">
        这是第一个子组件
    </n-tab-pane>
    <n-tab-pane tab="Comp 2" name="#comp2">
        这是第二个子组件
        <n-button>去更深的页面</n-button>
    </n-tab-pane>
</template>