前端路由框架完成

src/App.vue

@@ -16,9 +16,9 @@
       <button
         class="tab-item"
         :class="{
-          active: activeNavItemIdx === 0
+          active: $route.name === 'GeneralView'
         }"
-        @click="activeNavItemIdx = 0"
+        @click="$router.push({name: 'GeneralView'})"
       >
         概述总览
         <img
@@ -31,9 +31,9 @@
       <button
         class="tab-item"
         :class="{
-          active: activeNavItemIdx === 1
+          active: $route.name === 'HistoryView'
         }"
-        @click="activeNavItemIdx = 1"
+        @click="$router.push({name: 'HistoryView'})"
       >
         历史回顾
         <img
@@ -46,9 +46,9 @@
       <button
         class="tab-item"
         :class="{
-          active: activeNavItemIdx === 2
+          active: $route.name === 'TreasureView'
         }"
-        @click="activeNavItemIdx = 2"
+        @click="$router.push({name: 'TreasureView'})"
       >
         国之重器
         <img
@@ -61,9 +61,9 @@
       <button
         class="tab-item"
         :class="{
-          active: activeNavItemIdx === 3
+          active: $route.name === 'MetaverseView'
         }"
-        @click="activeNavItemIdx = 3"
+        @click="$router.push({name: 'MetaverseView'})"
       >
         工业元宇宙
         <img

src/router/index.js

@@ -1,5 +1,9 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import GeneralView from '../views/General.vue'
+import HistoryView from '../views/History.vue'
+import TreasureView from '../views/Treasure.vue'
+import MetaverseView from '../views/Metaverse.vue'
+
 // import store from '@/store/index.js'
 
 const routes = [
@@ -9,6 +13,21 @@ const routes = [
     name: 'GeneralView',
     component: GeneralView,
   },
+  {
+    path: '/history',
+    name: 'HistoryView',
+    component: HistoryView,
+  },
+  {
+    path: '/treasure',
+    name: 'TreasureView',
+    component: TreasureView,
+  },
+  {
+    path: '/metaverse',
+    name: 'MetaverseView',
+    component: MetaverseView,
+  },
 ]
 
 const router = createRouter({

src/views/General.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="home"
+    class="general"
   >
     <h1 :title="'离开的监管机构'">
       离开的监管机构
@@ -114,7 +114,7 @@ import {
 import deepClone from 'lodash/cloneDeep'
 
 export default {
-  name: 'HomeView',
+  name: 'GeneralView',
   components: {
   },
 
@@ -239,7 +239,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.home {
+.general {
   >h1 {
     position: absolute;
     top: 51px;

src/views/History.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="history">
+    sfsd
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs } from 'vue'
+
+export default {
+  name: 'HistoryView',
+  setup () {
+    const state = reactive({
+      count: 0,
+    })
+
+    return {
+      ...toRefs(state),
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.history {
+
+}
+</style>

src/views/Metaverse.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="history">
+    sfsd
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs } from 'vue'
+
+export default {
+  name: 'MetaverseView',
+  setup () {
+    const state = reactive({
+      count: 0,
+    })
+
+    return {
+      ...toRefs(state),
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.history {
+
+}
+</style>

src/views/Treasure.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="history">
+    sfsd
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs } from 'vue'
+
+export default {
+  name: 'TreasureView',
+  setup () {
+    const state = reactive({
+      count: 0,
+    })
+
+    return {
+      ...toRefs(state),
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.history {
+
+}
+</style>