sb

src/components/CameraContent-1-1-1.vue

@@ -500,6 +500,7 @@ const displayingHotspotIdx = ref(-1)
       >button.hotspot.active{
         >.label{
           display: flex;
+          pointer-events: none;
         }
         >.deco{
           display: initial;

src/components/CameraContent-1-2-3.vue

@@ -0,0 +1,20 @@
+
+<template>
+  <div class="asdf" />
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+</script>
+
+<style lang="less" scoped>
+.asdf{
+
+}
+</style>

src/components/CameraContent-1-2.vue

@@ -1 +0,0 @@
-

src/components/CameraContent-1-3-1.vue

@@ -0,0 +1,20 @@
+
+<template>
+  <div class="asdf" />
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+</script>
+
+<style lang="less" scoped>
+.asdf{
+
+}
+</style>

src/components/CameraContent-1-3-2.vue

@@ -0,0 +1,20 @@
+
+<template>
+  <div class="asdf" />
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+</script>
+
+<style lang="less" scoped>
+.asdf{
+
+}
+</style>

src/components/CameraContent-1-3-3.vue

@@ -0,0 +1,20 @@
+
+<template>
+  <div class="asdf" />
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+</script>
+
+<style lang="less" scoped>
+.asdf{
+
+}
+</style>

src/views/PanoView.vue

@@ -211,15 +211,30 @@ const btnOnTrack3Name = computed(() => {
   return currentCameraList.value[cameraIdx.value].contentPageBtnNameList[2]
 })
 
-const CameraContent1 = defineAsyncComponent(() =>
+let CameraContent1 = defineAsyncComponent(() =>
   import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-1.vue`)
 )
-const CameraContent2 = defineAsyncComponent(() =>
+let CameraContent2 = defineAsyncComponent(() =>
   import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-2.vue`)
 )
-const CameraContent3 = defineAsyncComponent(() =>
+let CameraContent3 = defineAsyncComponent(() =>
   import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-3.vue`)
 )
+onBeforeRouteUpdate((to, from) => {
+  console.log('to: ', to)
+  if (to.name === route.name) {
+    CameraContent1 = defineAsyncComponent(() =>
+      import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-1.vue`)
+    )
+    CameraContent2 = defineAsyncComponent(() =>
+      import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-2.vue`)
+    )
+    CameraContent3 = defineAsyncComponent(() =>
+      import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-3.vue`)
+    )
+  }
+})
+
 
 const {
   windowSizeInCssForRef,