使用 vue 路由器时，分页无法按预期工作

Question

我正在推送页面更改的查询参数，它工作正常：

getProducts(){

   this.$router
        .push({
          name: 'products',
          query: {
            page: this.page,
          },
        })
        .catch(() => {})
... fetching data from backend
}

当我单击分页项并且数据正确加载时，它工作正常，但是当我从浏览器返回时，查询参数正在更改，但分页和数据不能更改，因为 this.page 值保持不变。怎么解决？

Answer 1

您必须在组件中添加 befoureRouteUpdate(to, from, next) 挂钩 - 或在 $route 上添加观察者。 Vue-Router 重用了相同的组件，因为您没有更改路由 - 仅更改查询参数。

请记住：

1. beforeRouteUpdate 只会在组件被重用时调用 - 而不是在第一次访问路由时（对于后者，您需要 beforeRouteEnter）
2. 当你离开路线时也会调用观察者（例如，如果你去clients页面）