vu e2路由传值怎么接收
时间: 2025-05-12 14:20:48 浏览: 31
### Vue 2 路由传参及接收方法
在 Vue 2 中,路由传参主要通过 `params` 或 `query` 的方式进行实现。以下是详细的说明和示例:
#### 使用 `params` 进行传参
当需要传递动态参数时,可以在路由配置中定义动态路径参数,并通过 `$router.push` 方法进行跳转。
##### 定义路由
在路由配置文件中,使用冒号 (`:`) 来标记动态部分:
```javascript
const routes = [
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
];
```
##### 发送参数
通过命名路由的方式发送参数:
```javascript
this.$router.push({
name: 'Detail',
params: { id: item.id } // 将要传递的参数放在 params 对象中
});
```
##### 接收参数
在目标组件中,可以通过 `$route.params` 获取传递过来的参数:
```javascript
export default {
mounted() {
console.log(this.$route.params.id); // 输出传递过来的 id 参数
}
};
```
---
#### 使用 `query` 进行传参
除了 `params` 方式外,还可以通过 URL 查询字符串的形式传递参数。
##### 定义路由
无需特别修改路由配置,直接支持查询字符串形式即可。
##### 发送参数
通过 `$router.push` 方法指定 `query` 属性:
```javascript
this.$router.push({
path: '/search',
query: { keyword: 'Vue' } // 将要传递的参数放在 query 对象中
});
```
此时生成的 URL 类似于 `/search?keyword=Vue`。
##### 接收参数
同样,在目标组件中可通过 `$route.query` 访问查询参数:
```javascript
export default {
mounted() {
console.log(this.$route.query.keyword); // 输出传递过来的关键词参数
}
};
```
---
#### 动态监听路由变化
如果页面加载后可能会有路由参数的变化,则可以利用 `watch` 监听器实时捕获这些变动[^3]。
```javascript
watch: {
'$route'(to, from) {
console.log('新的路由参数:', to.params);
console.log('旧的路由参数:', from.params);
}
}
```
以上就是 Vue 2 中常见的两种路由传参方式及其对应的接收方法[^4]。
---
### 总结
- **Params**:适合用于动态路径片段的情况,不会显示在 URL 地址栏中。
- **Query**:适用于附加额外信息到 URL 上,便于分享或书签保存。
这两种方式各有优劣,开发者应根据实际需求选择合适的方式来完成数据传输的任务。
阅读全文
相关推荐


















