vue 如何解页面跳转传参
时间: 2023-07-27 09:09:21 浏览: 87
vue+requirejs页面带参跳转
4星 · 用户满意度95%
有多种方式可以实现 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']
}
```
阅读全文