分享界面改为通过前端路由打开，这样才能真的分享出去。

src/components/TreasureShare.vue

@@ -3,7 +3,12 @@
     <article ref="article">
       <button
         class="close"
-        @click="$emit('close')"
+        @click="$router.replace({
+          name: 'TreasureDetail',
+          query: {
+            id: $route.query.id,
+          },
+        })"
       />
       <h2 title="万吨水压机">
         {{ info.name }}
@@ -58,17 +63,14 @@
 
 <script>
 import QRCode from 'qrcode'
-import { ref, nextTick } from "vue"
+import { ref, nextTick, reactive, } from "vue"
 import html2canvas from "html2canvas"
+import { useRoute, useRouter } from "vue-router"
 
 export default {
-  props: {
-    info: {
-      type: Object,
-      required: true,
-    }
-  },
   setup(props) {
+    const route = useRoute()
+
     const prefix = process.env.VUE_APP_API_ORIGIN
 
     const qrcodeDataUrl = ref(null)
@@ -99,6 +101,14 @@ export default {
       })
     })
 
+    const info = reactive({})
+    api.getTreasureDetail(route.query.id).then((res) => {
+      console.log(res)
+      info.name = res.entity.name
+      info.thumb = res.entity.thumb
+      info.description = res.entity.description
+    })
+
     return {
       prefix,
 
@@ -109,6 +119,8 @@ export default {
       aDownloadHref,
       isSaving,
       onClickDownload,
+
+      info,
     }
   },
 }

src/router/index.js

@@ -6,6 +6,7 @@ import TreasureDetail from '../views/TreasureDetail.vue'
 import RecordView from '../views/Record.vue'
 import MetaverseView from '../views/Metaverse.vue'
 import TestView from '../views/Test.vue'
+import TreasureShare from "@/components/TreasureShare.vue"
 
 // import store from '@/store/index.js'
 
@@ -52,6 +53,13 @@ const routes = [
     meta: {
       belongNavGroup: 2,
     },
+    children: [
+      {
+        path: 'Treasure-share',
+        name: 'TreasureShare',
+        component: TreasureShare,
+      },
+    ],
   },
   {
     path: '/record',
@@ -92,7 +100,7 @@ const router = createRouter({
 
 router.beforeEach((to, from) => {
   // 非开发环境下强制每次都从首页进入
-  if (process.env.NODE_ENV === 'production' && !from.name && to.name !== 'GeneralView') {
+  if (process.env.NODE_ENV === 'production' && !from.name && (to.name !== 'GeneralView' && to.name !== 'TreasureShare')) {
     return '/'
   }
 })

src/views/TreasureDetail.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="treasure-detail">
     <Teleport to="body">
-      <TreasureShare
+      <!-- <TreasureShare
         v-if="isShowShare"
         :info="rawData.value?.entity"
         @close="isShowShare = false"
-      />
+      /> -->
+      <router-view />
     </Teleport>
 
     <video
@@ -163,7 +164,14 @@
     <div class="swiper-button-next" />
 
     <menu>
-      <button @click="isShowShare = true">
+      <button
+        @click="$router.push({
+          name: 'TreasureShare',
+          query: {
+            id: $route.query.id
+          }
+        })"
+      >
         <img
           class=""
           src="@/assets/images/icon_share.png"
@@ -225,14 +233,10 @@ import {
   watch,
 } from 'vue'
 import { useRoute } from "vue-router"
-import TreasureShare from "@/components/TreasureShare.vue"
 import Swiper from 'swiper/bundle'
 import 'swiper/css/bundle'
 
 export default {
-  components: {
-    TreasureShare
-  },
   setup () {
     const prefix = process.env.VUE_APP_API_ORIGIN
 
@@ -295,11 +299,6 @@ export default {
     })
 
     /**
-     * 分享
-     */
-    const isShowShare = ref(false)
-
-    /**
      * 背景音乐相关
      */
     const bgAudio = ref(null)
@@ -390,7 +389,6 @@ export default {
       hasMusic,
       imageUrlList,
       isMusicOn,
-      isShowShare,
       isShowTabbar,
       modelUrlList,
       musicUrl,