vue中router页面之间参数传递,params失效,建议使用query
简介：本文讲解vue中router页面之间参数传递,params失效,建议使用query。
在vue中有一个router功能，他可以用来页面之间的参数传递，他有两种方式一种是params方式，一种是query方式，但是params方式特别容易导致参数的丢失问题，所以一般建议使用query的方式。
query使用的格式如下：
发送端：
goToDetailsPage(title, description) { // 导航到LearningPathDetails页面，并将标题和描述作为参数传递 console.log('Go to details page:', title, description); // 打印发送的数据内容 const data = { title: title, description: description }; const jsonData = JSON.stringify(data); // 在跳转时只传递一个对象，包含 title 和 description this.$router.push({ name: 'LearningPathDetailsView', query: { data: jsonData } }); }
接收端：
created() { // 解析接收到的 JSON 字符串 const jsonData = this.$route.query.data; const data = JSON.parse(jsonData); // 使用解析后的数据 console.log('Received data:', data); this.title = data.title || ''; this.description = data.description || ''; }
