vue 路由携带参数跳转页面

Vue 路由传参的方式有两种：

1.通过 `params` 传参

在路由配置中，设置路由的 `path` 和 `component`，同时在 `props` 中设置为 `true`，表示开启 `props` 传参。然后在组件中通过 `$route.params` 获取路由参数。

路由配置：

{
  path: '/user/:id',
  name: 'User',
  component: User,
  props: true
}

组件中获取参数：

<template>
  <div>{{ $route.params.id }}</div>
</template>

跳转时传参：

this.$router.push({ name: 'User', params: { id: 123 }})

2.通过 `query` 传参

在路由配置中，设置路由的 `path` 和 `component`，同时在组件中通过 `$route.query` 获取路由参数。

路由配置：

{
  path: '/user',
  name: 'User',
  component: User
}

组件中获取参数：

<template>
  <div>{{ $route.query.id }}</div>
</template>

跳转时传参：

this.$router.push({ name: 'User', query: { id: 123 }})