Vue.js 中的三级 Tab 切换，支持页面刷新后保持当前激活状态

2023-09-27 16:10:01

三级 Tab 切换：让您的用户轻松导航！

欢迎来到本指南，我们将探索如何在 Vue.js 中实现三级 Tab 切换，让您的应用程序界面更加直观且用户友好！

什么是 Tab 切换？

Tab 切换是一种常见的 UI 元素，它允许用户在多个选项卡之间切换，查看不同内容。这种交互模式广泛应用于导航、设置和数据展示等场景。

使用 Vue.js 实现三级 Tab 切换

Vue.js 提供了直观的 API 来创建 Tab 切换组件。让我们构建一个包含三个选项卡的 Tab 切换示例：

<template>
  <div>
    <v-tabs>
      <v-tab>Tab 1</v-tab>
      <v-tab>Tab 2</v-tab>
      <v-tab>Tab 3</v-tab>
    </v-tabs>

    <div v-show="currentTab === 'tab-1'">Content for Tab 1</div>
    <div v-show="currentTab === 'tab-2'">Content for Tab 2</div>
    <div v-show="currentTab === 'tab-3'">Content for Tab 3</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'tab-1',
    }
  },
}
</script>

在这个示例中，<v-tabs> 组件包含 <v-tab> 子组件，每个子组件代表一个选项卡。currentTab 响应式数据用于跟踪当前激活的选项卡，并通过 v-show 指令动态显示选项卡内容。

保持激活状态

页面刷新后，组件状态通常会丢失，因此让我们探索一种方法，让激活状态在刷新后依然保持：

使用 Query 或 Params：

您可以在路由中传递当前激活的选项卡名称作为 query 或 params 参数：

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/tabs',
      component: Tabs,
      query: {
        activeTab: 'tab-2',
      },
    },
  ],
})

使用本地存储：

您还可以使用本地存储来保存当前激活的选项卡名称：

export default {
  data() {
    return {
      currentTab: localStorage.getItem('activeTab') || 'tab-1',
    }
  },
  watch: {
    currentTab(newTab, oldTab) {
      localStorage.setItem('activeTab', newTab)
    }
  },
}