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

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，而不是[=15] =].

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

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

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

如何处理？

Answer 1

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

您可以将查询参数绑定到组件中的 prop（请参阅 Passing Props to Route Components). You can watch it or use the beforeRouteUpdate 挂钩以在其值更改时加载下一页。

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

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

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

How can I keep alive the previous page use a method to push?

vue.js

vue-router