query参数携带数据

初级的CV工程师

已于 2022-03-09 14:14:42 修改

阅读量957

点赞数

文章标签： javascript vue.js 前端

于 2022-03-06 17:22:19 首次发布

本文链接：https://blog.csdn.net/m0_45219210/article/details/123280343

版权

本文介绍了在前端开发中如何通过query参数和sessionStorage传递页面间数据，讨论了两种方式的优缺点。当query参数不适合大量或敏感数据时，推荐使用sessionStorage进行存储。同时，强调了在数据安全方面，sessionStorage能更好地保护信息不被暴露。

摘要由CSDN通过智能技术生成

通常情况下我们另一个页面需要前一个页面的Id当作入参项后台请求数据

这个时候我们可以通过query参数去携带

当触发点击事件的时候携带当前项

      <div
        @click="onClickLook(item)"
        v-for="item in templatelist"
        :key="item.templateId"
        class="item"
      >
        <div class="name">
          {{ item.templateName }}
        </div>
      </div>

然后取出当前项的id和name，携带到query参数里面

     onClickLook (item) {
      let templateId = item.templateId
      let templateName=item.templateName
      this.$router.push({
        path: '/helpCenter/createOrderDetail',
        query: {
          templateId,
          templateName
        }
      })
    },

在第将要跳转的页面的created里面去除id和name，复制到this里面对应的字段。这样我们就可以在向后端请求数据的时候携带了

  created() {
    // 创建完毕状态===============
    let { templateId, templateName } = this.$route.query;
    this.templateId = templateId;
    this.templatename = templateName;
  },

但是这样携带数据有两个缺点，一是可携带的参数比较少，二是query参数会暴露在路由当中，不安全。

当我们需要携带的参数较多时，可以使用sessionStorage先在前一个页面进行存储，再在需要的页面进行解析。

具体请看：

sessionStorage存储数据实际运用_m0_45219210的博客-CSDN博客