通过this.$router

通过this.$router可以进行路由跳转和传参。当使用query方式传递参数时，可以使用this.$route.query进行接收。而如果传递的参数是对象或数组，在地址栏中会被强制转换成[object Object]，刷新后无法获取对象值。如果使用params进行传参，可以使用this.$route.params进行接收。通过this.$router.push方法可以进行路由跳转，传入不同的参数可以实现不同的跳转。

相关问题

如何通过this.$router.push传递参数

在Vue.js中，`this.$router.push`方法用于导航到新的路由，通常会带有参数以便于数据的传递。使用`this.$router.push`时，你可以像这样：

// 基本用法，无参数
this.$router.push('/your-route');

// 传递参数，例如一个对象或数组
this.$router.push({
  name: 'yourRouteName', // 如果是基于名称的路由
  params: {
    id: 123,           // 如果是动态路由参数
    name: 'John Doe'   // 或者多个参数
  }
});

// 或者直接使用查询字符串（query）
this.$router.push({ path: '/your-route?param1=value1&param2=value2' });

// 也可以使用动态路径和参数
this.$router.push(`/route/:id?`, { id: '123' });

// 当你想在导航完成后触发一个回调函数，可以传递一个异步函数作为最后一个参数
this.$router.push('/your-route', () => {
  console.log('Navigating...');
});

通过this.$router.push跳转传值，并在对应的页面取值

可以通过 `this.$router.push` 的 `query` 参数来进行传值。具体步骤如下：

1.在跳转时，通过 `query` 参数传递数据。例如：

this.$router.push({
  path: '/target-page',
  query: {
    key1: 'value1',
    key2: 'value2'
  }
})

2.在接收页面，通过 `$route.query` 获取传递的参数。例如：

mounted() {
  const { key1, key2 } = this.$route.query
  console.log(key1, key2)
}

这样就可以在接收页面中获取到传递的参数了。需要注意的是，传递的参数会在 URL 中显示，因此不适合传递敏感信息。如果需要传递敏感信息，可以考虑使用 Vuex 或其他状态管理工具。