vue 之实现跨页面传参

客官°小女子只卖身不卖艺 2023-06-30 01:33 131阅读 0赞

# 前言 #

最近在做项目的时候发现，在添加一条信息的时候需要显示这条信息的详细信息，但显示完刷新一下页面会跳到初始化状态，所以为了解决这种情况需要将添加的信息显示在另一个界面，具体解决方法如下：

# 一、父页面 #

## 1.静态组件 ##

由于项目对组件进行了封装，所以这里需要引入组件库进行，只需一行代码。

<headComponent v-bind:type="typelist" style="width:100%"></headComponent>

## 2.放从后端查出的组件的类型的数组。 ##

data() {
        return {
          //后端返回的detailContent存放
          typelist: [],
                }
           }

## 3.提交信息 ##

点击提交按钮的时候将输入的数据提交到数据库

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70][]

## 4.调添加信息方法 ##

![20200113145053831.png][]

## 5.请求后端添加信息接口，请求成功，并将输入的数据传到另一个界面。 ##

//请假内容填写
          createLeave(data).then(Response => {
              const vm =this;
              //点跳转到显示详细信息界面，跳转到显示详情页面，并将输入的内容传过去
              vm.$router.push({name:"leaveSubmission",
              params:{typelist}
              });
          });

## 6.源码 ##

add() {    
          var i;
          //点击确定按钮，提交用户填写的信息
          var model = JSON.stringify(this.typelist);
          for (let index = 0; index < this.typelist.length; index++) {
            if (
              this.typelist[index].value.length == 0 ||
              this.typelist[index].value == ""
            ) {
              this.$toast(this.typelist[index].title + "内容不能为空");
              i = index - 1;
              break;
            } else {
             i = index + 1;
            }
          }
          if (i == this.typelist.length) {
              this.processId = 5
              this.addLeaveInfo(this.processId, this.typelist);
          }
        },
        //添加信息的方法
        addLeaveInfo(processId, typelist) {
          var model = JSON.stringify(this.typelist);
          const data = {
            流程Id
            processId: 5,
            //输入的内容
            detailContent: model
          };
          //请假内容填写
          createLeave(data).then(Response => {
              const vm =this;
              vm.$router.push({name:"leaveSubmission",
              params:{typelist}
              });
          });
        },

# 二、子页面 #

此页面用来显示父页面提交的数据，防止刷新后回到初始化的问题。

## 1.组件 ##

同样需要组件来接收数据，直接引用组件库，和父页面的一样。

<headComponent v-bind:type="typelist" style="width:100%" position="relative"></headComponent>

## 2.**接收父页面传过来的值，将添加的所有内容放在数组中传过来，完了在子页面渲染出来。** ##

// 输入内容
      created() {
        // 接收传值
        this.receiveData();
      }，

##  3.将接收到的内容传递给静态组件渲染出来。 ##

//接收初始化界面提交传过来的数据
        receiveData() {
                      this.typelist = this.$route.params.typelist;
                      console.log(this.typelist); 
                    }

总结：这样就完成了一次跳转，解决了之前刷新回到初始状态的情况。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200113145038620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg==,size_16,color_FFFFFF,t_70
[20200113145053831.png]: https://img-blog.csdnimg.cn/20200113145053831.png