Vue已卸载组件数据丢失问题：跨组件数据处理方案咨询

问题根源 #

你当前通过路由params传递州和城市ID，当从Results跳转到Details时，Results组件被卸载，返回时即使路由参数存在，也会因组件重新初始化的时机问题导致数据加载失败；更核心的是，搜索条件这类跨组件共享的数据，仅靠路由params传递并不合适，因为组件卸载后依赖它的状态会直接丢失。

可行解决方案 #

1. 改用路由Query参数替代Params #

将州和城市ID放在路由query中，query参数会保留在URL里，返回时不会丢失，组件重新创建时可直接读取。

修改Navbar.vue的跳转代码：

<router-link :to="{name: 'results', query: {state: state_id, city: city_id} }" aria-current="page" title="Resultados">
  <div>Search</div>
</router-link>

修改Results.vue的参数读取逻辑：

<script>
export default {    
    data() {
        return {
            state_id: this.$route.query.state,
            city_id: this.$route.query.city,
            areas: [],
        }
    },
    methods: {        
        searchAreas(state_id, city_id) {
            load_areas.get(state_id, city_id).then(
                result => {
                    this.areas = result.data
                }
            )
        }
    },
    mounted() {
        this.searchAreas(this.state_id, this.city_id)
    },    
    watch: {
      '$route.query': {
        handler(newQuery) {
          this.state_id = newQuery.state
          this.city_id = newQuery.city
          this.searchAreas(this.state_id, this.city_id)
        },
        immediate: true
      }
    }
}
</script>

2. 用全局状态管理存储搜索条件 #

将州和城市的选择状态存入全局仓库（如Pinia/Vuex），所有需要的组件都能读取，不受组件卸载影响。

示例（Pinia）：

• 创建状态仓库：

// stores/searchStore.js
import { defineStore } from 'pinia'

export const useSearchStore = defineStore('search', {
  state: () => ({
    stateId: '',
    cityId: ''
  }),
  actions: {
    setSearchParams(stateId, cityId) {
      this.stateId = stateId
      this.cityId = cityId
    }
  }
})

• 在Navbar.vue中更新仓库状态：

<script>
import { useSearchStore } from '@/stores/searchStore'

export default {
  setup() {
    const searchStore = useSearchStore()
    const state_id = ref('')
    const city_id = ref('')

    const handleSearch = () => {
      searchStore.setSearchParams(state_id.value, city_id.value)
    }

    return { state_id, city_id, handleSearch }
  }
}
</script>

跳转时可结合query保证URL可分享：

<router-link :to="{name: 'results', query: {state: state_id, city: city_id} }" @click="handleSearch">
  <div>Search</div>
</router-link>

• 在Results.vue中读取仓库状态：

<script>
import { useSearchStore } from '@/stores/searchStore'
import { onMounted, watch, ref } from 'vue'

export default {    
    setup() {
      const searchStore = useSearchStore()
      const areas = ref([])

      const searchAreas = () => {
        load_areas.get(searchStore.stateId, searchStore.cityId).then(
          result => {
            areas.value = result.data
          }
        )
      }

      onMounted(() => {
        searchAreas()
      })

      watch(() => [searchStore.stateId, searchStore.cityId], () => {
        searchAreas()
      })

      return { areas }
    }
}
</script>

3. 临时存储到LocalStorage/SessionStorage #

若不需要全局状态，可将搜索参数存入本地存储，组件初始化时读取，卸载后数据不会丢失。

修改Navbar.vue的搜索事件：

<script>
export default {
  methods: {
    seach() {
      localStorage.setItem('searchParams', JSON.stringify({
        state: this.state_id,
        city: this.city_id
      }))
    }
  }
}
</script>

修改Results.vue的初始化逻辑：

<script>
export default {    
    data() {
        return {
            state_id: '',
            city_id: '',
            areas: [],
        }
    },
    methods: {        
        searchAreas(state_id, city_id) {
            load_areas.get(state_id, city_id).then(
                result => {
                    this.areas = result.data
                }
            )
        }
    },
    mounted() {
      const params = JSON.parse(localStorage.getItem('searchParams'))
      if (params) {
        this.state_id = params.state
        this.city_id = params.city
        this.searchAreas(this.state_id, this.city_id)
      }
    },
    watch: {
      '$route'() {
        const params = JSON.parse(localStorage.getItem('searchParams'))
        if (params) {
          this.state_id = params.state
          this.city_id = params.city
          this.searchAreas(this.state_id, this.city_id)
        }
      }
    }
}
</script>

注：若需关闭页面后清除数据，可改用sessionStorage。

额外优化点 #

• 修正Results.vue中方法名不一致问题：定义的search方法和调用的searchAreas需统一，避免报错。
• 跳转到Details时，建议将州、城市ID及选中的区域ID通过路由参数传递，确保Details能获取完整信息，返回时参数也能保留：

<router-link :to="{name: 'details', query: {state: state_id, city: city_id, areaId: area.id} }" tag="div" class="container" :key="area">
  <!-- 内容 -->
</router-link>

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