gx

src/router/index.js

@@ -50,6 +50,16 @@ const router = createRouter({
           path: '/home/analyze',
           component: () => import('../view/analyze.vue'),
         },
+        {
+          name: '首页地图',
+          path: '/home/index/map',
+          component: () => import('../view/sy_map.vue'),
+        },
+        {
+          name: '首页表格',
+          path: '/home/index/table',
+          component: () => import('../view/sy_table.vue'),
+        },
       ]
     },
   ]

src/view/sy.vue

@@ -2,7 +2,7 @@
   <div class="module">
     <div class="displayFlex left_bg">
       <div class="flex1">
-        <div class="yd_title left_1">
+        <div class="yd_title left_1" @click="goto('/home/index/table')">
           <div class="animate-border">
             <i></i>
             <i></i>
@@ -217,7 +217,7 @@
             <div class="sex">男性人口</div>
             <img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" />
           </div>
-          <div class="people_total_item2 center">
+          <div class="people_total_item2 center" @click="goto('/home/index/map')">
             <img src="../assets/images/sy/people_total.png" alt="" />
             <div class="number">{{ data.PopulationData.rkzs }}</div>
             <div class="total">人口总数</div>
@@ -637,6 +637,15 @@ import qyfw1 from "../assets/images/sy/ljzcs.png";
 import qyfw2 from "../assets/images/sy/rzbms.png";
 import qyfw3 from "../assets/images/sy/shqys.png";
 import qyfw4 from "../assets/images/sy/dxje.png";
+import { useRouter, useRoute } from "vue-router";
+const router = useRouter();
+const routers = useRoute();
+// 路由跳转
+const goto = (url) => {
+  router.push({
+    path: `${url}`,
+  });
+}
 //控制echart的显示
 const showEchart = ref(false);
 // 详情弹框
@@ -2061,6 +2070,7 @@ onBeforeMount(async () => {
   background-image: url(@/assets/images/sy/new_msfz.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
+  cursor: pointer;
 }
 
 .left_2 {

src/view/sy_map.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>map</div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+</style>

src/view/sy_table.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>table</div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+</style>