Vue中API调用或页面重载后如何保持Radio button标签页的选中状态

你遇到的问题核心原因是硬编码了第一个tab的checked属性，组件重渲染（API调用触发更新、页面刷新）时会自动复位到默认选中的第一个标签，没有和动态状态做绑定。
下面是完整改造方案：

1. 修改模板动态绑定checked属性 #

把写死的checked属性改为和动态变量绑定，同时封装tab切换的公共方法：

<div class="tab">
  <input
    type="radio"
    :checked="activeTab === 'tab-1'"
    name="css-tabs"
    id="tab-1"
    class="tab-switch"
  />
  <label
    for="tab-1"
    class="tab-label"
    @click="handleTabChange('tab-1', '/route-1')"
  >
    Route - 1</label
  >
  <div class="tab-content">
    <router-view :key="$route.path" />
  </div>
</div>

<div class="tab">
  <input
    type="radio"
    :checked="activeTab === 'tab-2'"
    name="css-tabs"
    id="tab-2"
    class="tab-switch"
  />
  <label
    for="tab-2"
    class="tab-label"
    @click="handleTabChange('tab-2', '/route-2')"
  >
    Route-2</label
  >
  <div class="tab-content">
    <router-view :key="$route.path" />
  </div>
</div>

2. 新增状态同步和持久化逻辑 #

在组件JS逻辑中新增状态存储、初始化恢复、路由同步的逻辑：

export default {
  data() {
    return {
      activeTab: 'tab-1' // 配置默认选中的tab
    }
  },
  mounted() {
    // 页面加载/组件挂载时恢复选中状态
    // 优先从路由匹配tab，避免存储的tab和当前路由不匹配
    const routeTabMap = {
      '/route-1': 'tab-1',
      '/route-2': 'tab-2'
    }
    const matchedTab = routeTabMap[this.$route.path]
    if (matchedTab) {
      this.activeTab = matchedTab
    } else {
      // 路由没有匹配到的话读sessionStorage的存储值
      const savedTab = sessionStorage.getItem('active_css_tab')
      this.activeTab = savedTab || 'tab-1'
    }
    sessionStorage.setItem('active_css_tab', this.activeTab)
  },
  methods: {
    handleTabChange(tabId, routePath) {
      this.activeTab = tabId
      // 存储选中状态到sessionStorage，刷新页面不会丢失
      sessionStorage.setItem('active_css_tab', tabId)
      this.$router.push(routePath)
    }
  },
  watch: {
    // 监听路由变化，同步tab选中状态，适配用户直接修改地址栏路由的场景
    '$route.path'(newPath) {
      const routeTabMap = {
        '/route-1': 'tab-1',
        '/route-2': 'tab-2'
      }
      this.activeTab = routeTabMap[newPath] || 'tab-1'
      sessionStorage.setItem('active_css_tab', this.activeTab)
    }
  }
}

可选调整 #

• 如果需要关闭浏览器后仍然保留选中状态，把代码里的sessionStorage替换为localStorage即可
• 后续新增tab只需要在模板加对应结构，同时在routeTabMap里新增路由和tabId的映射即可

内容的提问来源于stack exchange，提问作者Nathan Azevedo