<think>在
Vue.js中，当使用`this
.$
router.push`导航到
新页面时，可以通过以下几种方式传递
参数：
1
. **路径
参数（
Params）**：在路由路径中定义的
参数，例如`/user/:id`。
2
. **查询
参数（Query）**：以键值对形式出现在URL的查询字符串中，例如`/user?id=123`。
3
. **状态
参数（State）**：通过`state`对象传递，不会显示在URL中，但刷
新页面会丢失。
目标页面接收
参数的方式：
- **路径
参数**：通过`this
.$route
.params`
获取。
- **查询
参数**：通过`this
.$route
.query`
获取。
- **状态
参数**：通过`this
.$route
.state`
获取（注意：
Vue Router 4
.x中，state
参数是通过history
.state传递的，因此需要通过`history
.state`或`this
.$route
.state`访问）。
另外，还可以通过路由配置的`props`选项将
参数作为组件的props传递。
下面是一个完整的示例：
### 1
. 路由配置
在路由配置文件中，定义目标路由，并可以设置`props`选项来将
参数映射为组件的props。
```javascript
//
router.js
import { create
Router, createWebHistory } from '
vue-
router';
import UserPage from '
./views/UserPage
.vue';
const routes = [
{
path: '/user/:id', // 路径
参数
name: 'user',
component: UserPage,
// 将
params和query转为props
props: (route) => ({
id: route
.params.id,
query: route
.query,
state: route
.state // 注意：state
参数需要从route
.state
获取
})
}
];
const
router = create
Router({
history: createWebHistory(),
routes
});
export default
router;
```
### 2
. 跳转时传递
参数
在源组件中，使用`this
.$
router.push`跳转并传递
参数。
```javascript
// 在
Vue组件的
方法中
methods: {
goToUserPage() {
// 使用
params、query和state传递
参数
this
.$
router.push({
name: 'user',
params: { id: 123 }, // 路径
参数
query: { from: 'home' }, // 查询
参数
state: { internalData: 'secret' } // 状态
参数
});
}
}
```
### 3
. 目标页面接收
参数
在目标页面（UserPage
.vue）中，可以通过以下方式接收
参数：
#### 方式1：通过`$route`对象
```
vue
<template>
<div>
<h1>用户页面</h1>
<p>ID: {{ $route
.params.id }}</p>
<p>来源: {{ $route
.query
.from }}</p>
<p>内部数据: {{ $route
.state?
.internalData }}</p>
</div>
</template>
<script>
export default {
mounted() {
console
.log('ID:', this
.$route
.params.id);
console
.log('Query:', this
.$route
.query
.from);
console
.log('State:', this
.$route
.state?
.internalData);
}
}
</script>
```
#### 方式2：通过props（推荐，更解耦）
在路由配置中已经设置了`props`函数，将
参数映射为props，因此可以在组件中直接使用props。
```
vue
<template>
<div>
<h1>用户页面</h1>
<p>ID: {{ id }}</p>
<p>来源: {{ query
.from }}</p>
<p>内部数据: {{ state?
.internalData }}</p>
</div>
</template>
<script>
export default {
props: {
id: {
type: String, // 注意：路径
参数总是字符串
required: true
},
query: {
type: Object,
default: () => ({})
},
state: {
type: Object,
default: () => ({})
}
},
mounted() {
console
.log('ID:', this
.id);
console
.log('Query:', this
.query
.from);
console
.log('State:', this
.state
.internalData);
}
}
</script>
```
### 注意事项：
1
. **路径
参数（
params）**：
- 当使用`
params`时，如果路由配置中使用了`name`进行跳转，则`
params`有效；如果使用`path`跳转，则`
params`会被忽略（除非在path中已经定义）。
- 刷
新页面时，`
params`
参数会保留（因为它们在URL中），但`state`
参数会丢失（除非使用持久化存储）。
2
. **状态
参数（state）**：
- 状态
参数不会显示在URL中，适合传递敏感数据或临时数据。
- 刷
新页面时，状态
参数会丢失，因为它是存储在内存中的（通过History API的state对象）。如果需要持久化，可以考虑使用
Vuex或本地存储。
3
. **查询
参数（query）**：
- 查询
参数会显示在URL中，适合传递非敏感数据。
- 刷
新页面时，查询
参数会保留。
4
. **响应式更新**：
- 如果同一个组件被复用（仅
参数变化），则组件的生命周期钩子（如`mounted`）不会再次触发。为了响应
参数变化，可以监听`$route`对象的变化。
```javascript
watch: {
'$route'(to, from) {
// 响应路由变化
this
.id = to
.params.id;
// 或者重新
获取数据
this
.fetchData();
}
}
```
### 在Composition API中
获取参数
如果使用
Vue 3的Composition API，可以通过`useRoute`钩子来访问当前路由对象。
```
vue
<script>
import { useRoute } from '
vue-
router';
export default {
setup() {
const route = useRoute();
// 访问
参数
const id = route
.params.id;
const from = route
.query
.from;
const internalData = route
.state?
.internalData;
return { id, from, internalData };
}
}
</script>
```
### 总结
- 使用`this
.$
router.push`传递
参数有三种方式：`
params`、`query`、`state`。
- 目标页面通过`$route`对象（或Composition API的`useRoute`）接收
参数，或者通过`props`接收（需在路由配置中开启）。
- 根据
参数的特性和需求（是否在URL中显示、是否持久化等）选择合适的传递方式。
§§相关问题§§:
1
. Vue Router 中如何实现路由嵌套？
2
. Vue Router 4
.x 与 3
.x 在
参数传递上有哪些主要区别？
3
. 如何在
Vue Router 中使用导航守卫（Navigation Guards）？
4
. 如何解决在
Vue Router中，当路由
参数变化时，组件不重新渲染的问题？</think>在
Vue.js 中，当使用 `this
.$
router.push` 导航到
新页面时，目标页面可以通过 `$route` 对象接收
参数。以下是详细的
参数接收
方法，包含代码示例和解释：
### 1
. **路径
参数（
Params）**
在路由配置中定义动态
参数：
```javascript
//
router.js
const routes = [
{
path: '/user/:userId',
name: 'UserPage',
component: UserPage
}
];
```
**跳转代码**：
```javascript
// 源页面
this
.$
router.push({
name: 'UserPage',
params: { userId: 123 }
});
// 或使用路径格式
this
.$
router.push('/user/123');
```
**目标页面接收**：
```
vue
<template>
<div>用户ID: {{ userId }}</div>
</template>
<script>
export default {
computed: {
userId() {
return this
.$route
.params.userId; // 123
}
},
mounted() {
console
.log('用户ID:', this
.$route
.params.userId);
}
}
</script>
```
### 2
. **查询
参数（Query）**
不需要路由配置：
```javascript
// 源页面
this
.$
router.push({
path: '/search',
query: {
keyword: '
vue',
page: 2
}
});
// 生成URL: /search?keyword=
vue&page=2
```
**目标页面接收**：
```
vue
<template>
<div>
关键词: {{ keyword }}, 页码: {{ page }}
</div>
</template>
<script>
export default {
computed: {
keyword() {
return this
.$route
.query
.keyword; // '
vue'
},
page() {
return Number(this
.$route
.query
.page); // 2 (转换为数字)
}
}
}
</script>
```
### 3
. **状态
参数（State）**
不会显示在 URL 中：
```javascript
// 源页面
this
.$
router.push({
name: 'Dashboard',
state: {
accessToken: 'abc123',
fromPage: 'home'
}
});
```
**目标页面接收**：
```javascript
export default {
mounted() {
console
.log('Token:', this
.$route
.state?
.accessToken); // 'abc123'
console
.log('来源:', this
.$route
.state?
.fromPage); // 'home'
}
}
```
### 4
. **Props 解耦（推荐方式）**
在路由配置中启用 props：
```javascript
//
router.js
{
path: '/product/:productId',
component: ProductPage,
props: true // 将
params 转为 props
}
```
**目标页面接收**：
```
vue
<template>
<div>产品ID: {{ productId }}</div>
</template>
<script>
export default {
props: ['productId'], // 直接作为 prop 接收
mounted() {
console
.log('产品ID:', this
.productId);
}
}
</script>
```
### 5
. **响应式
参数处理**
当
参数变化时自动更新：
```
vue
<script>
export default {
watch: {
'$route'(to) {
// 路由
参数变化时触发
if (to
.params.userId !== this
.userId) {
this
.fetchUserData(to
.params.userId);
}
}
},
methods: {
fetchUserData(userId) {
// 根据新ID
获取数据
}
}
}
</script>
```
### 6
. **Composition API 方式（
Vue 3）**
```
vue
<script setup>
import { useRoute } from '
vue-
router';
const route = useRoute();
//
获取参数
const userId = computed(() => route
.params.userId);
const page = computed(() => Number(route
.query
.page || 1));
// 状态
参数
const token = ref(route
.state?
.accessToken || '');
</script>
```
### 关键注意事项
1
. **
参数类型转换**：
- URL
参数总是字符串，需要手动转换类型
```javascript
const page = parseInt(this
.$route
.query
.page, 10) || 1;
```
2
. **
参数持久性**：
- `
params`：刷
新页面会丢失（除非在 URL 中）
- `query`：保留在 URL 中，刷新后仍存在
- `state`：刷
新页面完全丢失
3
. **路由复用问题**：
```javascript
// 解决相同组件复用问题
beforeRouteUpdate(to, from, next) {
this
.fetchData(to
.params.id);
next();
}
```
### 完整示例
**路由配置**：
```javascript
//
router.js
const routes = [
{
path: '/user/:userId',
name: 'UserPage',
component: () => import('
./UserPage
.vue'),
props: true
},
{
path: '/search',
name: 'SearchPage',
component: () => import('
./SearchPage
.vue')
}
];
```
**目标页面** (`UserPage
.vue`)：
```
vue
<template>
<div>
<h1>用户信息</h1>
<p>ID: {{ userId }}</p>
<p>来源: {{ source }}</p>
</div>
</template>
<script>
export default {
props: ['userId'], // 通过 props 接收路径
参数
computed: {
source() {
return this
.$route
.query
.source || '未知来源';
}
},
mounted() {
console
.log('内部数据:', this
.$route
.state?
.internalData);
}
}
</script>
```
**跳转代码**：
```javascript
// 从任意页面跳转
this
.$
router.push({
name: 'UserPage',
params: { userId: 789 },
query: { source: 'dashboard' },
state: { internalData: 'secret-info' }
});
```
本文详细介绍了在Vue.js中如何通过两种方式传递参数到路由页面：Params和Query。使用Params时需要注意不能与path同时使用，而Query则作为URL查询参数进行传递。文中还提供了如何在目标页面中获取这些参数的具体方法。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
