Vue 2应用跨域跳转后浏览器返回丢失搜索结果的方案咨询

针对你的需求（从域外应用返回时保留搜索结果，页面刷新时清空查询），推荐以下几种可行方案：

方案一：利用浏览器History State存储关键词 #

这是最贴合需求的方案，通过history.pushState将搜索关键词存入浏览器历史状态，返回时读取状态重新执行搜索，页面刷新时历史状态会被重置，自然清空查询。

实现步骤： #

1. 执行搜索时存入状态：
   在用户触发搜索的方法中，将关键词存入history state，同时保持当前URL不变（避免刷新时带参数）：

// 组件内的搜索方法示例
methods: {
  handleSearch() {
    const keyword = this.searchInput.trim();
    if (keyword) {
      // 将关键词存入history state
      history.pushState(
        { searchKeyword: keyword },
        '',
        window.location.pathname
      );
      // 执行搜索逻辑（调用接口/过滤数据）
      this.fetchSearchResults(keyword);
    }
  }
}

2. 监听返回事件恢复结果：
   在应用根组件（如App.vue）中监听popstate事件，当用户从域外返回时，读取history state中的关键词并重新搜索：

export default {
  data() {
    return {
      searchInput: '',
      searchResults: []
    };
  },
  mounted() {
    this.handlePopstate = (event) => {
      if (event.state?.searchKeyword) {
        // 恢复搜索状态
        this.searchInput = event.state.searchKeyword;
        this.fetchSearchResults(event.state.searchKeyword);
      } else {
        // 无关键词时清空结果和输入框
        this.searchResults = [];
        this.searchInput = '';
      }
    };
    window.addEventListener('popstate', this.handlePopstate);
  },
  beforeDestroy() {
    // 解绑事件避免内存泄漏
    window.removeEventListener('popstate', this.handlePopstate);
  },
  methods: {
    async fetchSearchResults(keyword) {
      // 模拟接口请求示例
      const res = await fetch(`/api/search?keyword=${encodeURIComponent(keyword)}`);
      this.searchResults = await res.json();
    }
  }
};

方案二：结合SessionStorage与导航类型判断 #

通过sessionStorage临时存储关键词，再利用浏览器的导航类型区分「返回」和「刷新」动作，刷新时清空存储，返回时恢复搜索。

实现步骤： #

1. 搜索后存入SessionStorage：

methods: {
  handleSearch() {
    const keyword = this.searchInput.trim();
    if (keyword) {
      sessionStorage.setItem('tempSearchKeyword', keyword);
      this.fetchSearchResults(keyword);
    }
  }
}

2. 页面加载时判断导航类型：
   在App.vue的mounted钩子中，通过performance API判断动作类型并执行对应逻辑：

mounted() {
  const navEntry = performance.getEntriesByType('navigation')[0];
  if (navEntry) {
    if (navEntry.type === 'back_forward') {
      // 浏览器返回动作：恢复搜索
      const keyword = sessionStorage.getItem('tempSearchKeyword');
      if (keyword) {
        this.searchInput = keyword;
        this.fetchSearchResults(keyword);
      }
    } else if (navEntry.type === 'reload') {
      // 页面刷新：清空存储和结果
      sessionStorage.removeItem('tempSearchKeyword');
      this.searchResults = [];
      this.searchInput = '';
    }
  }
}

注意：若需兼容旧浏览器，可替换为已废弃但仍被支持的performance.navigation.type。

方案三：Vue Router路由守卫结合History State（若使用Vue Router） #

如果你的应用基于Vue Router开发，可在全局路由守卫中实现状态恢复：

// 全局路由守卫示例
router.beforeEach((to, from, next) => {
  const navType = performance.getEntriesByType('navigation')[0]?.type;
  if (navType === 'back_forward' && to.name === 'SearchPage') {
    const keyword = history.state?.searchKeyword;
    if (keyword) {
      // 通过Vuex或全局状态触发搜索
      router.app.$store.dispatch('search', keyword);
    }
  }
  next();
});

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