Vue项目列表页如何保留页码与搜索参数，返回时恢复状态？

我来帮你搞定这个问题！核心思路就是把列表的页码、搜索参数这些状态同步到URL的查询参数（query）里，这样不管是从详情页返回、刷新页面，都能通过URL恢复之前的状态。下面一步步来实现：

1. 初始化页面状态：从URL读取参数 #

首先，在列表页的created钩子中，从路由的query里读取页码和搜索参数，用来初始化页面的状态：

export default {
  data() {
    return {
      cur_page: 1,
      search_params: {} // 存放你的搜索参数，比如关键词、筛选条件等
    }
  },
  created() {
    // 从URL query读取页码，注意转成数字类型
    if (this.$route.query.cur_page) {
      this.cur_page = Number(this.$route.query.cur_page)
    }
    // 读取搜索参数（示例为关键词，其他筛选参数同理）
    if (this.$route.query.keyword) {
      this.search_params.keyword = this.$route.query.keyword
    }
    // 根据读取到的参数发起列表请求
    this.fetchListData()
  },
  methods: {
    fetchListData() {
      // 用cur_page和search_params作为请求参数调用接口
      // ...你的列表数据请求逻辑
    }
  }
}

提示：如果你的cur_page之前是通过props传递的，建议改成组件内部维护，避免props和路由query的状态冲突。

2. 状态变化时同步到URL #

当页码切换或者搜索参数变化时，把新的状态更新到URL的query中，推荐用$router.replace（不会新增多余的历史记录，返回体验更自然）：

处理页码切换 #

修改你的server_change_page方法：

methods: {
  server_change_page(newPage) {
    this.cur_page = newPage
    // 同步到URL query，保留原有其他query参数
    this.$router.replace({
      query: {
        ...this.$route.query,
        cur_page: newPage
      }
    })
    // 重新请求列表数据
    this.fetchListData()
  }
}

处理搜索参数变化 #

比如搜索框输入关键词时：

methods: {
  onSearchKeywordChange(keyword) {
    this.search_params.keyword = keyword
    // 搜索时重置页码为1，并同步到URL
    this.cur_page = 1
    this.$router.replace({
      query: {
        ...this.$route.query,
        keyword,
        cur_page: 1
      }
    })
    this.fetchListData()
  }
}

3. 监听路由变化，自动恢复状态 #

如果用户手动修改URL的query参数（比如直接改页码），我们需要监听路由变化，自动更新页面状态并重新请求数据：

watch: {
  '$route.query'(newQuery) {
    // 更新页码状态
    this.cur_page = newQuery.cur_page ? Number(newQuery.cur_page) : 1
    // 更新搜索参数
    this.search_params.keyword = newQuery.keyword || ''
    // 其他筛选参数同理更新
    // 重新请求数据
    this.fetchListData()
  }
}

4. 优化返回体验 #

现在你用$router.go(-1)返回时，之前的页面URL已经包含了页码和搜索参数，列表页初始化时会自动读取这些参数，完美恢复到之前的状态，再也不会丢失搜索数据啦！

额外提示 #

• 你的原有路由配置不需要修改，query是附加在URL后面的，最终URL会变成类似：/home/aftersale_physicalserver_workpanel/xxx/yyy?cur_page=2&keyword=test
• 所有需要保留的筛选状态（比如分类、状态筛选）都可以放到query里，只要在状态变化时同步到URL即可

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