router.push 传参数和取值

在Vue.js中，通过`router.push()`方法可以导航到不同的路由。如果您需要在导航时传递参数，可以使用对象语法，并将参数作为路由对象的`params`属性或`query`属性的值传递。

例如，如果您想要导航到路径为`/example`的路由，并且传递一个名为`id`的参数，可以使用以下代码：

router.push({ path: '/example', params: { id: 123 }})

或者使用query属性：

router.push({ path: '/example', query: { id: 123 }})

在目标组件中，可以通过$router对象的$route属性来访问路由参数或查询参数。例如，对于上面的示例，您可以使用以下代码来访问路由参数或查询参数：

// 访问路由参数
this.$route.params.id // 123

// 访问查询参数
this.$route.query.id // 123

需要注意的是，路由参数和查询参数都是字符串类型，如果需要使用其他类型的参数，需要在传递参数时进行类型转换。

相关问题

this.$router.push 传参数

`this.$router.push` 是Vue Router库中的一个导航方法，它用于异步地将用户导航到新的路由路径。当你需要带参数传递给目标路由时，可以在调用 `push` 方法时提供一个包含参数的对象。这个对象通常看起来像这样：

this.$router.push({
  name: 'yourRouteName', // 或者 path: '/path/:param1/:param2'
  params: {
    param1: 'value1',
    param2: 'value2'
  }
});

这里的 `name` 是路由的名称，如果存在同名的命名路由，则会匹配；`params` 属性则用于动态参数，它们会被解析并插入到路由路径中。

如果你直接指定路径，可以这样做：

this.$router.push('/route?param1=value1&param2=value2');

URL查询参数可以表示为 `?param1=value1&param2=value2` 的形式。

router.push 传参数

在 Vue.js 中使用 `router.push()` 方法进行路由跳转时，可以通过第二个参数传递参数。例如：

this.$router.push({
  path: '/user/123',
  query: {
    name: 'John',
    age: 30
  }
})

其中，`path` 属性表示要跳转的路由路径，`query` 属性是一个对象，表示要传递的参数。在目标组件中，可以通过 `$route.query` 获取传递的参数。例如：

export default {
  mounted() {
    console.log(this.$route.query.name) // 输出：John
    console.log(this.$route.query.age) // 输出：30
  }
}

除了使用 `$route.query` 获取参数外，还可以使用 `$route.params` 获取通过路由路径传递的参数。例如：

// 路由配置
{
  path: '/user/:id',
  component: User
}

// 跳转时传递参数
this.$router.push('/user/123')

// 在 User 组件中获取参数
export default {
  mounted() {
    console.log(this.$route.params.id) // 输出：123
  }
}