[JavaScript知识库]query参数携带数据

通常情况下我们另一个页面需要前一个页面的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先在前一个页面进行存储，再在需要的页面进行解析。