vue跨页面传值

传值的页面 

// 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(); 
    }