update：优化了代码结构

src/components/AsideMenuBar.vue

@@ -11,17 +11,9 @@
                         <el-icon><MapLocation /></el-icon>
                         <span>点的案例</span>
                     </template>
-                    <el-menu-item @click="indexBtn('pointOne')">
+                    <el-menu-item v-for="item in elementPointData" :key="item.id" index="pointOne">
                         <el-icon><View /></el-icon>
-                        <span>one</span>
-                    </el-menu-item>
-                    <el-menu-item @click="indexBtn('firstTwo')">
-                        <el-icon><View /></el-icon>
-                        <span>two</span>
-                    </el-menu-item>
-                    <el-menu-item @click="indexBtn('firstThree')">
-                        <el-icon><View /></el-icon>
-                        <span>three</span>
+                        <span>{{item.title}}</span>
                     </el-menu-item>
                 </el-sub-menu>
 
@@ -30,17 +22,9 @@
                         <el-icon><SemiSelect /></el-icon>
                         <span>线的案例</span>
                     </template>
-                    <el-menu-item index="/code">
-                        <el-icon><View /></el-icon>
-                        <span>one</span>
-                    </el-menu-item>
-                    <el-menu-item index="/code">
-                        <el-icon><View /></el-icon>
-                        <span>two</span>
-                    </el-menu-item>
-                    <el-menu-item index="/code">
+                    <el-menu-item v-for="item in elementLineData" :key="item.id" index="lineOne">
                         <el-icon><View /></el-icon>
-                        <span>three</span>
+                        <span>{{item.title}}</span>
                     </el-menu-item>
                 </el-sub-menu>
 
@@ -49,17 +33,9 @@
                         <el-icon><Grid /></el-icon>
                         <span>面的案例</span>
                     </template>
-                    <el-menu-item index="/code">
+                    <el-menu-item v-for="item in elementPlaneData" :key="item.id" index="planeOne">
                         <el-icon><View /></el-icon>
-                        <span>one</span>
-                    </el-menu-item>
-                    <el-menu-item index="/code">
-                        <el-icon><View /></el-icon>
-                        <span>two</span>
-                    </el-menu-item>
-                    <el-menu-item index="/code">
-                        <el-icon><View /></el-icon>
-                        <span>three</span>
+                        <span>{{item.title}}</span>
                     </el-menu-item>
                 </el-sub-menu>
             </el-menu>
@@ -68,20 +44,23 @@
 </template>
 
 <script setup>
-import { MapLocation, SemiSelect, Grid, View } from "@element-plus/icons-vue"
-import { useRouter } from 'vue-router'
+import { ref } from 'vue';
+import { MapLocation, SemiSelect, Grid, View } from "@element-plus/icons-vue";
+import { elementPointMap, elementLineMap, elementPlaneMap } from '@/views/ElementMap';
 
-const router = useRouter()
+const elementPointData = ref()
+const elementLineData = ref()
+const elementPlaneData = ref()
+
+elementPointData.value = elementPointMap;
+elementLineData.value = elementLineMap;
+elementPlaneData.value = elementPlaneMap;
 
 const props = defineProps({
     isCollapse: {
       type: Boolean,
     }
 });
-
-function indexBtn(id) {
-    router.push(`/CodeAndCesium/?id=${id}`)
-}
 </script>
 
 <style lang="scss" scoped>

src/router/index.js

@@ -8,6 +8,7 @@ const routes = [
         children: [
             {
                 path: '',
+                name: 'indexview',
                 component: () => import('@/views/indexView.vue')  // 使用懒加载
             },
         ]

src/views/indexView.vue

@@ -4,7 +4,7 @@
             <span class="text-base font-bold">点的案例</span>
             <div style="overflow-y: auto" class="container">
                 <div v-for="item in elementPointData" :key="item.id" @click="indexBtn(`point${item.title}`)" class="item-container">
-                    <span>{{item.title}}</span>
+                    <div>{{item.title}}</div>
                     <img :src="item.pngUrl" width="250">
                 </div>
             </div>
@@ -13,7 +13,7 @@
             <span class="text-base font-bold">线的案例</span>
             <div style="overflow-y: auto" class="container">
                 <div v-for="item in elementLineData" :key="item.id" @click="indexBtn(`line${item.title}`)" class="item-container">
-                    <span>{{item.title}}</span>
+                    <div>{{item.title}}</div>
                     <img :src="item.pngUrl" width="250">
                 </div>
             </div>
@@ -22,7 +22,7 @@
             <span class="text-base font-bold">面的案例</span>
             <div style="overflow-y: auto" class="container">
                 <div v-for="item in elementPlaneData" :key="item.id" @click="indexBtn(`plane${item.title}`)" class="item-container">
-                    <span>{{item.title}}</span>
+                    <div>{{item.title}}</div>
                     <img :src="item.pngUrl" width="250">
                 </div>
             </div>