增加数据爬取router

src/components/AppNavbar.vue

@@ -24,12 +24,16 @@
             问答
           </el-menu-item>
         </el-menu>
-<!--        <div class="navbar-actions">-->
-<!--          <div class="user-info">-->
-<!--            <span class="user-avatar">👤</span>-->
-<!--            <span class="user-name">用户</span>-->
-<!--          </div>-->
-<!--        </div>-->
+       <div class="navbar-actions">
+        <div class="user-info" @click="handleDataCrawling">
+           <span class="user-avatar"><el-icon><Coin /></el-icon></span>
+           <span class="user-name">数据爬取</span>
+         </div>
+         <!-- <div class="user-info">
+           <span class="user-avatar">👤</span>
+           <span class="user-name">用户</span>
+         </div> -->
+       </div>
       </div>
     </div>
   </div>
@@ -38,9 +42,10 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-
+import { Coin } from '@element-plus/icons-vue';
 export default defineComponent({
   name: 'AppNavbar',
+  components: { Coin },
   setup() {
     const route = useRoute();
     const router = useRouter();
@@ -60,9 +65,14 @@ export default defineComponent({
       router.push(index);
     };
 
+    const handleDataCrawling = () => {
+      router.push('/data-crawling');
+    };
+
     return {
       activeRoute,
       handleSelect,
+      handleDataCrawling,
     };
   },
 });
@@ -176,6 +186,7 @@ export default defineComponent({
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: white;
   transition: all 0.3s ease;
+  cursor: pointer;
 }
 
 .user-info:hover {

src/router/index.ts

@@ -1,9 +1,11 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
-import KnowledgeBase from "@/views/KnowledgeBase.vue";
-import KnowledgeContent from "@/views/KnowledgeContent.vue";
-import SearchPage from "@/views/SearchPage.vue";
-import QAndA from "@/views/QAndA.vue";
-import QAndAHistory from "@/views/QAndAHistory.vue";
+const KnowledgeBase = () => import("@/views/KnowledgeBase.vue");
+const KnowledgeContent = () => import("@/views/KnowledgeContent.vue");
+const SearchPage = () => import("@/views/SearchPage.vue");
+const QAndA = () => import("@/views/QAndA.vue");
+const QAndAHistory = () => import("@/views/QAndAHistory.vue");
+// 懒加载
+const DataCrawling = () => import("@/views/DataCrawling/index.vue");
 
 
 
@@ -33,6 +35,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'QAndAHistory',
     component: QAndAHistory,
   },
+  {
+    path: '/data-crawling',
+    name: 'DataCrawling',
+    component: DataCrawling,
+  },
 ]
 
 const router = createRouter({

src/views/DataCrawling/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h1>数据爬取</h1>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DataCrawling',
+});
+</script>
+
+<style scoped>
+
+</style>