this.$router.push跳转页面后如何获取query

在跳转页面时，可以通过在 `this.$router.push` 方法中传递一个对象，该对象的 `query` 属性用于设置查询参数。例如：

this.$router.push({
  path: '/some/path',
  query: {
    foo: 'bar',
    baz: 'qux'
  }
})

在接收页面中，可以通过 `$route.query` 对象来获取查询参数。例如：

console.log(this.$route.query.foo) // 输出 "bar"
console.log(this.$route.query.baz) // 输出 "qux"

如果需要在组件中实时监听查询参数的变化，可以使用 `$route` 对象的 `watch` 方法。例如：

watch: {
  '$route.query': {
    handler: function (newQuery, oldQuery) {
      console.log('查询参数已更新：', newQuery)
    },
    immediate: true // 立即执行一次
  }
}

相关问题

this.$router.push跳转页面后并刷新页面

在 Vue.js 中，`this.$router.push` 方法会进行页面的跳转，但不会刷新页面。如果你希望在页面跳转后刷新页面，可以考虑使用以下方法：

1. 通过给 `this.$router.push` 方法传递一个新的 `key` 参数来实现强制刷新。例如：

   this.$router.push({
     path: '/your-path',
     query: { key: Math.random() }
   });

在目标页面中，可以通过 `this.$route.query.key` 获取到 `key` 的值，并在页面的某个地方使用该值，触发页面重新渲染。

2. 使用 `window.location.reload()` 方法来刷新页面。在跳转完成后，可以手动调用该方法来刷新当前页面。例如：

   this.$router.push('/your-path').then(() => {
     window.location.reload();
   });

注意，这种方式会刷新整个页面，可能导致数据丢

this.$router.push跳转页面后并刷新

在Vue.js中，this.$router.push方法只负责路由的跳转，不会触发页面的刷新。如果你希望在页面跳转后进行刷新，可以使用其他方法来实现。

一种常见的方式是，在路由跳转后手动刷新页面。你可以使用window.location.reload()方法来实现页面的刷新，如下所示：

// 在路由跳转之后手动刷新页面
this.$router.push('/your-route')
  .then(() => {
    window.location.reload();
  });

另一种方式是，在路由配置中添加一个参数，并在路由跳转时更新该参数的值，从而触发页面的刷新。具体实现如下：

首先，在路由配置中添加一个参数（比如叫做refresh），并设置默认值为false：

// 路由配置
{
  path: '/your-route',
  name: 'YourRoute',
  component: YourComponent,
  meta: {
    refresh: false
  }
}

然后，在路由跳转时更新该参数的值：

// 在路由跳转之前更新参数值
this.$router.push({
  name: 'YourRoute',
  query: {
    refresh: true
  }
});

最后，在组件的created钩子函数中监听该参数的变化，一旦参数值发生变化，就进行刷新操作：

// 在组件中监听参数变化，并进行刷新操作
created() {
  this.$route.query.refresh && window.location.reload();
}

这样做的原理是，通过改变路由参数的值来触发组件的重新创建，从而达到刷新页面的效果。