vue 如何解页面跳转传参

有多种方式可以实现 Vue 页面跳转传参，以下是其中一些常用的方法：

1. 使用 `query` 参数传递参数

在使用 `VueRouter` 进行页面跳转时，可以通过在 `router-link` 或者 `router.push` 方法中添加 `query` 参数来传递参数。例如：

<router-link :to="{ path: '/user', query: { id: '123' }}">User</router-link>

// 或者
this.$router.push({ path: '/user', query: { id: '123' }})

在目标组件中，可以通过 `$route.query` 获取传递过来的参数。例如：

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

2. 使用 `params` 参数传递参数

除了使用 `query` 参数传递参数，还可以使用 `params` 参数进行传递。不同的是，`params` 参数传递的参数会被编码到 URL 中，而 `query` 参数则不会。例如：

<router-link :to="{ path: '/user/123' }">User</router-link>

// 或者
this.$router.push({ path: '/user/123' })

在目标组件中，可以通过 `$route.params` 获取传递过来的参数。例如：

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

需要注意的是，使用 `params` 参数传递参数时，需要在路由配置中声明参数，例如：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

3. 使用 `props` 传递参数

在目标组件中，可以通过 `props` 接收父组件传递过来的参数。例如：

// 父组件
<template>
  <div>
    <user :id="'123'"></user>
  </div>
</template>

// 子组件
<template>
  <div>User {{ id }}</div>
</template>

<script>
export default {
  props: ['id']
}
</script>

需要注意的是，使用 `props` 传递参数时，需要在路由配置中将 `props` 属性设置为 `true`，并且在目标组件中声明接收的参数。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true
    }
  ]
})

export default {
  props: ['id']
}