update：锚点功能的添加，点击子菜单跳转到对应的内容区域

src/components/AsideMenuBar.vue

 <template>
     <el-aside>
         <el-scrollbar>
-            <el-menu router unique-opened :collapse="isCollapse">
+            <el-menu unique-opened :collapse="isCollapse">
                 <a href="/" class="logo">
                     <img src="@/assets/vue.svg" alt="">
                     <h1>Cesium</h1>
@@ -11,7 +11,7 @@
                         <el-icon><MapLocation /></el-icon>
                         <span>点的案例</span>
                     </template>
-                    <el-menu-item v-for="item in elementPointData" :key="item.id" index="pointOne">
+                    <el-menu-item v-for="item in elementPointData" :key="item.id" @click="goAnchor(item.title)">
                         <el-icon><View /></el-icon>
                         <span>{{item.title}}</span>
                     </el-menu-item>
@@ -22,7 +22,7 @@
                         <el-icon><SemiSelect /></el-icon>
                         <span>线的案例</span>
                     </template>
-                    <el-menu-item v-for="item in elementLineData" :key="item.id" index="lineOne">
+                    <el-menu-item v-for="item in elementLineData" :key="item.id" @click="goAnchor(item.title)">
                         <el-icon><View /></el-icon>
                         <span>{{item.title}}</span>
                     </el-menu-item>
@@ -33,7 +33,7 @@
                         <el-icon><Grid /></el-icon>
                         <span>面的案例</span>
                     </template>
-                    <el-menu-item v-for="item in elementPlaneData" :key="item.id" index="planeOne">
+                    <el-menu-item v-for="item in elementPlaneData" :key="item.id" @click="goAnchor(item.title)">
                         <el-icon><View /></el-icon>
                         <span>{{item.title}}</span>
                     </el-menu-item>
@@ -61,6 +61,14 @@ const props = defineProps({
       type: Boolean,
     }
 });
+
+// 锚点定位跳转
+function goAnchor(title) {
+    var anchor = document.getElementById(title);
+    if (anchor) {
+        anchor.scrollIntoView({ behavior: 'smooth' });
+    }
+}
 </script>
 
 <style lang="scss" scoped>

src/views/ElementMap.js

 export const elementPointMap = {
     One: {
-        title: 'One',
+        title: 'pointOne',
         pngUrl: '/src/assets/PointOne.png'
     },
     Two: {
-        title: 'Two',
+        title: 'pointTwo',
         pngUrl: '/src/assets/PointOne.png'
     },
     Three: {
-        title: 'Three',
+        title: 'pointThree',
         pngUrl: '/src/assets/PointOne.png'
     },
     Four: {
-        title: 'Four',
+        title: 'pointFour',
+        pngUrl: '/src/assets/PointOne.png'
+    },
+    Five: {
+        title: 'pointFive',
+        pngUrl: '/src/assets/PointOne.png'
+    },
+    Six: {
+        title: 'pointSix',
         pngUrl: '/src/assets/PointOne.png'
     }
 }
 
 export const elementLineMap = {
     One: {
-        title: 'One',
+        title: 'lineOne',
         pngUrl: '/src/assets/LineOne.png'
     },
     Two: {
-        title: 'Two',
+        title: 'lineTwo',
         pngUrl: '/src/assets/LineOne.png'
     },
     Three: {
-        title: 'Three',
+        title: 'lineThree',
         pngUrl: '/src/assets/LineOne.png'
     },
     Four: {
-        title: 'Four',
+        title: 'lineFour',
+        pngUrl: '/src/assets/LineOne.png'
+    },
+    Five: {
+        title: 'lineFive',
+        pngUrl: '/src/assets/LineOne.png'
+    },
+    Six: {
+        title: 'lineSix',
         pngUrl: '/src/assets/LineOne.png'
     }
 }
 
 export const elementPlaneMap = {
     One: {
-        title: 'One',
+        title: 'planeOne',
         pngUrl: '/src/assets/PlaneOne.png'
     },
     Two: {
-        title: 'Two',
+        title: 'planeTwo',
         pngUrl: '/src/assets/PlaneOne.png'
     },
     Three: {
-        title: 'Three',
+        title: 'planeThree',
         pngUrl: '/src/assets/PlaneOne.png'
     },
     Four: {
-        title: 'Four',
+        title: 'planeFour',
+        pngUrl: '/src/assets/PlaneOne.png'
+    },
+    Five: {
+        title: 'planeFive',
+        pngUrl: '/src/assets/PlaneOne.png'
+    },
+    Six: {
+        title: 'planeSix',
         pngUrl: '/src/assets/PlaneOne.png'
     }
 }
\ No newline at end of file

src/views/indexView.vue

@@ -3,8 +3,8 @@
         <div class="mt-5">
             <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">
-                    <div>{{item.title}}</div>
+                <div v-for="item in elementPointData" :key="item.id" @click="indexBtn(`${item.title}`)" class="item-container">
+                    <div :id="item.title">{{item.title}}</div>
                     <img :src="item.pngUrl" width="250">
                 </div>
             </div>
@@ -12,8 +12,8 @@
         <div class="mt-10">
             <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">
-                    <div>{{item.title}}</div>
+                <div v-for="item in elementLineData" :key="item.id" @click="indexBtn(`${item.title}`)" class="item-container">
+                    <div :id="item.title">{{item.title}}</div>
                     <img :src="item.pngUrl" width="250">
                 </div>
             </div>
@@ -21,8 +21,8 @@
         <div class="mt-10">
             <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">
-                    <div>{{item.title}}</div>
+                <div v-for="item in elementPlaneData" :key="item.id" @click="indexBtn(`${item.title}`)" class="item-container">
+                    <div :id="item.title">{{item.title}}</div>
                     <img :src="item.pngUrl" width="250">
                 </div>
             </div>
@@ -44,6 +44,7 @@ elementPointData.value = elementPointMap;
 elementLineData.value = elementLineMap;
 elementPlaneData.value = elementPlaneMap;
 
+// 跳转到对应的编码编辑内容
 function indexBtn(id) {
     router.push(`/CodeAndCesium/?id=${id}`)
 }