Vue中 this.$router.push 传参
时间: 2025-02-18 17:36:58 浏览: 34
### Vue.js 使用 `$router.push` 传参的方法
在 Vue.js 中,可以利用 `this.$router.push()` 方法来实现页面间的导航以及参数传递。当通过路径(path)方式进行跳转时,可以通过设置对象中的 `query` 属性来进行查询字符串形式的参数传递[^2]。
对于更复杂的数据结构或较大的数据量,则建议先将数据存储到 Vuex store 或者本地缓存中再携带标识符作为参数进行传输。下面是一个简单的例子展示了如何向目标组件发送名为 `news` 的参数:
```javascript
// 发送方:准备要传送的信息并执行跳转操作
this.$router.push({
path: '/m/singleNews',
query: {
news: JSON.stringify(this.news) // 如果需要传递的对象较为复杂,考虑序列化处理
}
});
```
接收端则可以从当前实例下的 `$route.query` 获取这些信息,并做相应的反序列化工作以便于后续使用:
```javascript
export default {
data(){
return{
receivedNews:''
};
},
mounted(){
const rawNews = this.$route.query.news;
try {
this.receivedNews = JSON.parse(rawNews);
} catch (error){
console.error('Failed to parse the passed parameter:', error);
}
}
}
```
需要注意的是,在实际开发过程中应当注意对所传递的内容做好必要的校验与异常捕获机制,确保应用稳定运行[^1]。
阅读全文
相关推荐


















