vue中router页面之间参数传递,params失效,建议使用query

GeekLiHua

发布于 2025-01-21 14:06:30

17400

代码可运行

文章被收录于专栏：JavaJava

运行总次数：0

代码可运行

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 || '';
    }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-01-20，如有侵权请联系 cloudcommunity@tencent.com 删除

字符串