git

src/pages/AllPages.vue

   <div class="index-box">
     <img src="../../public/fourBoxes-image/1.jpg" class="bg-image" />
     <div class="index-FourBoxes">
-      <div class="index-FourBoxes-yushi test" @click="goYuShi">
-        <img src="../../public/fourBoxes-image/浴室.png" class="Four-image" />
+      <div class="index-FourBoxes-yushi test" @click="goPagess('yushi')">
+        <img src="../../public/fourBoxes-image/浴室.png" :style="styleImage" class="Four-image" />
         <div style=" width: 108px; position: absolute; left: 10.8vw; top: 35vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/浴室-2.png" />
         </div>
       </div>
-      <div class="index-FourBoxes-yimao test">
-        <img src="../../public/fourBoxes-image/衣帽间.png" class="Four-image" />
+      <div class="index-FourBoxes-yimao test" @click="goPagess('yimao')">
+        <img src="../../public/fourBoxes-image/衣帽间.png" :style="styleImage" class="Four-image" />
         <div style=" width: 108px; position: absolute; left: 59.8vw; top: 35vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/衣帽间-2.png" />
         </div>
       </div>
-      <div class="index-FourBoxes-keting test">
-        <img src="../../public/fourBoxes-image/客厅.png" class="Four-image" />
+      <div class="index-FourBoxes-keting test" @click="goPagess('keting')">
+        <img src="../../public/fourBoxes-image/客厅.png" :style="styleImage" class="Four-image" />
         <div style=" width: 108px; position: absolute; left: 10.8vw; top: 77vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/客厅-2.png" />
         </div>
       </div>
-      <div class="index-FourBoxes-yangtai test">
-        <img src="../../public/fourBoxes-image/阳台.png" class="Four-image" />
+      <div class="index-FourBoxes-yangtai test" @click="goPagess('yangtai')">
+        <img src="../../public/fourBoxes-image/阳台.png" :style="styleImage" class="Four-image" />
         <div style=" width: 108px; position: absolute; left: 59.8vw; top: 77vh;">
           <img style=" width:100%;" src="../assets/fourBoxes-2/阳台-2.png" />
         </div>
 
 <script>
 export default {
-  methods: {
-    goYuShi() {
-      this.$router.push({ name: 'Test' })
+  data() {
+    return {
+      styleImage: 'opacity: 0.3;',
+      typeYushi: {
+        bgImage: require('../../public/yushi-image/1.jpg'),
+        swiper: {
+          swiper1: require('../../public/yushi-image/2.png'),
+          swiper2: require('../../public/yushi-image/3.png'),
+          swiper3: require('../../public/yushi-image/4.png')
+        }
+      },
+      typeYimao: {
+        bgImage: require('../../public/yimao-image/1.jpg'),
+        swiper: {
+          swiper1: require('../../public/yimao-image/2.png'),
+          swiper2: require('../../public/yimao-image/3.png'),
+          swiper3: require('../../public/yimao-image/4.png')
+        }
+      },
+      typeKeting: {
+        bgImage: require('../../public/keting-image/1.jpg'),
+        swiper: {
+          swiper1: require('../../public/keting-image/2.png'),
+          swiper2: require('../../public/keting-image/3.png'),
+          swiper3: require('../../public/keting-image/4.png'),
+          swiper4: require('../../public/keting-image/5.png')
+        }
+      },
+      typeYangtai: {
+        bgImage: require('../../public/yangtai-image/1.jpg'),
+        swiper: {
+          swiper1: require('../../public/yangtai-image/2.png'),
+          swiper2: require('../../public/yangtai-image/3.png'),
+          swiper3: require('../../public/yangtai-image/4.png'),
+          swiper4: require('../../public/yangtai-image/5.png')
+        }
+      }
     }
+  },
+  methods: {
+    goPagess(e, res) {
+      this.styleImage = ''
+
+      switch (e) {
+        case 'yushi':
+          console.log('yushi')
+          var arr = JSON.stringify(this.typeYushi)
+          this.$router.push({
+            name: 'Test',
+            params: { types: encodeURIComponent(arr) }
+          })
+
+          break
+        case 'keting':
+          console.log('keting')
+          var arr = JSON.stringify(this.typeKeting)
+          this.$router.push({
+            name: 'Test',
+            params: { types: encodeURIComponent(arr) }
+          })
+          break
+        case 'yimao':
+          console.log('yimao')
+          var arr = JSON.stringify(this.typeYimao)
+          this.$router.push({
+            name: 'Test',
+            params: { types: encodeURIComponent(arr) }
+          })
+          break
+        case 'yangtai':
+          console.log('yangtai')
+          var arr = JSON.stringify(this.typeYangtai)
+          this.$router.push({
+            name: 'Test',
+            params: { types: encodeURIComponent(arr) }
+          })
+          break
+        default:
+          return
+      }
+    },
+    goYimao() {},
+    goKeting() {},
+    goYangtai() {}
   }
 }
 </script>

src/pages/IndexImage.vue

     <div class="index-inner-swiper">
       <swiper :options="swiperOptions">
         <swiper-slide class="index-inner-slide">
-          <img src="../../public/yushi-image/2.png" />
+          <img :src="typeImage.swiper1" />
         </swiper-slide>
 
         <swiper-slide class="index-inner-slide">
-          <img src="../../public/yushi-image/3.png" />
+          <img :src="typeImage.swiper2" />
         </swiper-slide>
 
         <swiper-slide class="index-inner-slide">
-          <img src="../../public/yushi-image/4.png" />
+          <img :src="typeImage.swiper3" />
         </swiper-slide>
-        <swiper-slide class="index-inner-slide">
-          <img src="../../public/yushi-image/4.png" />
+        <swiper-slide class="index-inner-slide" v-if="typeImage.swiper4">
+          <img :src="typeImage.swiper4" />
         </swiper-slide>
       </swiper>
     </div>
 <script>
 export default {
   name: 'IndexImage',
+  props: {
+    typeImage: {
+      type: Object
+      // default: () => ({})
+    }
+  },
   data() {
     return {
       swiperOptions: {

src/pages/Test.vue

 <template>
   <div class="index-box">
-    <img src="../../public/yushi-image/1.jpg" class="bg-image" />
+    <img :src="songList.bgImage" class="bg-image" />
     <!-- 透明返回按钮 -->
     <div style=" position: absolute;width: 55px;height: 52px;" @click="$router.go(-1)"></div>
     <!-- 透明返回按钮 -->
 
       <!-- swiper -->
       <div class="body-swiper-middle">
-        <index-image></index-image>
+        <index-image :typeImage="swiperList"></index-image>
       </div>
       <!-- swiper -->
 
 
 <script>
 export default {
+  data() {
+    return {
+      songList: null,
+      swiperList: null
+    }
+  },
+  props: {
+    typePages: {
+      type: Object
+      // default: () => ({})
+    }
+  },
   components: {
     IndexImage: () => import('./IndexImage.vue')
+  },
+  mounted() {
+    this.$nextTick(function () {
+      console.log(this.$route.params.types)
+      var list = decodeURIComponent(this.$route.params.types)
+      this.songList = JSON.parse(list)
+      this.swiperList = this.songList.swiper
+    })
   }
 }
 </script>