vue-router动态路由在子级路由返回时如何带回分页参数

Vue Router 的动态路由通常用于管理复杂的路由结构，其中包含了动态部分，比如路径中的占位符。在处理子级路由返回时，特别是涉及到分页参数的情况，你需要确保这些参数能够随着导航状态一起传递。

当你在子组件通过 `this.$router.push` 或者 `$router.go` 返回到上级路由，并携带分页参数时，你可以：

1. **使用query参数**：将分页参数添加到 URL 的查询字符串中，例如 `/parent/:id?page=10`，然后在父组件的路由守卫（如 `beforeRouteUpdate` 或 `beforeEach`）中接收这些参数并更新组件的状态。

// 子组件
this.$router.push({ name: 'parent', params: { id: this.id }, query: { page: this.currentPage } });

// 父组件路由守卫
router.beforeEach((to, from, next) => {
  if (to.name === 'parent') {
    // 获取分页参数
    const currentPage = to.query.page;
    // 更新组件状态或其他业务逻辑
  }
  next();
});

2. **使用route-level params**：如果分页数据不是经常改变，且不需要在整个应用中共享，可以考虑将它作为路由参数的一部分，例如 `/parent/:id/page/10`。同样在父组件中处理参数。

// 子组件
this.$router.push({ ...to, params: { ...to.params, page: this.currentPage } });

// 父组件
router.afterEach((to, from) => {
  if (to.name === 'parent') {
    // 使用to.params.page访问分页参数
  }
});

无论是哪种方式，都需要在返回上一级路由时显式地包含这些参数，并确保在父组件中能够正确解析和处理它们。