如何保持上一页使用推送方法的活力?

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(请参阅将 props 传递给路由组件(。您可以观看它或使用beforeRouteUpdate挂钩在其值更改时加载下一页。

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

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