Vue.js：点击浏览器返回按钮时如何恢复动态子组件的渲染状态

这个问题其实挺常见的，核心就是得把用户之前选中的组件状态存下来，等页面返回的时候再恢复就行。给你几个简单好用的方案，直接就能套进你的现有代码里：

方案1：利用路由Query参数（最推荐，贴合浏览器行为） #

把当前选中的title值放到路由的Query参数里，这样浏览器前进/后退时，路由参数会自动保留，组件重新挂载时读取这个参数就能恢复状态。

修改代码： #

1. 更新切换组件的方法，同步修改路由Query：

methods: {
  switchDataShown(value) {
    this.title = value
    // 把选中的tab值同步到路由query中
    this.$router.push({
      query: {
        activeTab: value
      }
    })
  }
}

2. 在组件挂载时读取路由参数，恢复状态：

mounted() {
  // 页面加载时优先取路由里的activeTab，没有则用默认的Profile
  const savedTab = this.$route.query.activeTab
  if (savedTab) {
    this.title = savedTab
  }
}

优势：完全贴合浏览器的前进/后退逻辑，用户体验最自然，不需要额外的存储依赖。

方案2：用SessionStorage临时存储（适合不想修改路由的场景） #

如果不想改动路由，可以把选中的状态存在sessionStorage里，它会在当前浏览器会话内保留，关闭浏览器才会清空。

修改代码： #

1. 切换组件时保存状态：

methods: {
  switchDataShown(value) {
    this.title = value
    // 把选中的tab值存在sessionStorage
    sessionStorage.setItem('activeDynamicTab', value)
  }
}

2. 组件挂载时读取存储的状态：

mounted() {
  const savedTab = sessionStorage.getItem('activeDynamicTab')
  if (savedTab) {
    this.title = savedTab
  }
}

补充：如果需要持久化状态（关闭浏览器再打开也保留），可以换成localStorage，但要注意清理过期数据。

方案3：全局状态管理（适合大型项目） #

如果你的项目已经在用Vuex或Pinia，可以把选中的状态存在全局仓库里，这样跨组件也能共享状态。

举个Pinia的例子：

1. 定义状态仓库：

// store/tabStore.js
import { defineStore } from 'pinia'
export const useTabStore = defineStore('tabStore', {
  state: () => ({
    activeTab: 'Profile'
  }),
  actions: {
    setActiveTab(tab) {
      this.activeTab = tab
    }
  }
})

2. 组件中使用仓库：

import { useTabStore } from '@/store/tabStore'
export default {
  setup() {
    const tabStore = useTabStore()
    const title = ref(tabStore.activeTab)

    const switchDataShown = (value) => {
      title.value = value
      tabStore.setActiveTab(value)
    }

    onMounted(() => {
      title.value = tabStore.activeTab
    })

    return { title, switchDataShown }
  }
}

优势：适合多组件需要共享tab状态的大型项目，状态管理更统一。

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