vue.js - 我怎样才能保持上一页使用一种方法来推送？

Question

如何让上一页保持事件状态？

我有一个列表页面，我在这个页面中有一个分页器。然后我使用 this.$router.push 推送到详细信息页面:

  go_details(h, params){
    let query = {
      id: params.row.id
    }
    this.$router.push({
      name: 'physicalserverDetails',
      query: query
    });
  },

在 physicalserverDetails 中，我使用 this.$router.go(-1); 返回。

但是，有一个麻烦，如果列表中有page 5，我从physicalserverDetails返回，列表页面将刷新page 1 ，而不是第 5 页。

我知道一般我可以使用keep-alive标签来实现目标，

<keep-alive include="index">
  <router-view></router-view>
</keep-alive>

但是必须要用this.$router.push(xxx)来配合，因为详情页是普通页，有很多条目。

如何处理？

Answer 1

一种方法是将页码作为查询参数存储在 URL 中。这样页码将被“记住”在路由器历史记录中，因为它存在于 URL 中。

您可以将查询参数绑定(bind)到组件中的 Prop (参见 Passing Props to Route Components )。你可以watch它或使用 beforeRouteUpdate 钩子(Hook)在其值更改时加载下一页。

如果您有上一个/下一个按钮，您需要做的就是将它们设为 <router-link> 有 page查询参数设置到相应的页面。

这不会将上一页保留在内存中(如 <keep-alive> 那样)，但您知道应该显示什么页码以响应路由更改，因为您只需检查 page查询参数。它还解决了 Stephan-v 在评论中指出的问题，因为刷新页面将保留页码。