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，而不是page 5

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

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

，但是必须使用this.$router.push(xxx)来配合它，因为详细信息页面是一个普通页面，包含许多条目。

如何处理？

Answer 1

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

您可以将查询参数绑定到组件中的prop（请参见Passing Props to Route Components）。您可以watch对其进行更改，也可以使用beforeRouteUpdate挂钩在其值更改时加载下一页。

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

这不会将上一页保留在内存中（就像<keep-alive>一样，但是您知道应该显示哪个页码来响应路由更改，因为您只需检查page查询参数。它还解决了Stephan-v在注释中指出的问题，因为刷新页面将保留页码。

如何使用上推方法使上一页保持活跃？

1 个答案: