vue跨页面传值

￡神魔★判官ぃ 2023-05-30 14:58 22阅读 0赞

### 传值的页面  ###

// html 中的点击图片跳转页面 showWordPicture(index)  
    <ul>
              <li class="spellwords">{
       {item.word}}</li>
              <li class="audiowords">
                <img class="audiowifi" src="../../assets/home/wifi.png" @click="playWordAudio(index)" />
                <audio :id="index" :src="item.audio"></audio>
              </li>
              <li class="picturewords">
                <img
                  class="showpicture"
                  src="../../assets/home/图片.png"
                  @click="showWordPictures(index)"
                />
              </li>
            </ul>

showWordPictures(index) {
          this.$router.push({
            name: "word-picture", // 将要跳转的页面
            params: { // 传递的值
              id: this.wordList[index].id,
              word: this.wordList[index].word,
              audio: this.wordList[index].audio,
              picture1: this.wordList[index].wordPicture1,
              picture2: this.wordList[index].wordPicture2,
              picture3: this.wordList[index].wordPicture3,
              picture4: this.wordList[index].wordPicture4
            }
          });
        },

### 接收传值的页面 ###

// 加载方法  
    methods:{
          showPicture(){
            var vm = this;
           vm.id = vm.$route.params.id; // 接收值
           vm.word =vm.$route.params.word;
           vm.audio=vm.$route.params.audio;
           vm.pictureList.push(vm.$route.params.picture1); // 插入值
           vm.pictureList.push(vm.$route.params.picture2);
           vm.pictureList.push(vm.$route.params.picture3);
           vm.pictureList.push(vm.$route.params.picture4);
           console.log("开始打印图片地址")
           console.log(this.pictureList);
          }
     
      },
        //进入页面的时候
        mounted(){
          this.showPicture(); 
        }