From ad15e3c6ab6d3b294a865e715ed4934ebb0ba828 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Tue, 10 Oct 2023 09:09:07 +0800
Subject: [PATCH] router link

---
 src/pages/Home.vue            | 27 ++++++++++++---------------
 src/pages/OperatingRecord.vue |  7 +++++++
 src/router/index.js           |  5 +++++
 src/style.scss                |  9 +++++++++
 vite.config.js                |  4 ++++
 5 files changed, 37 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/OperatingRecord.vue

diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 5f47563..6772dfc 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -7,7 +7,7 @@
       </div>
       <div class="operater_tabs">
         <router-link to="/">
-          <div class="btn_tab active">
+          <div :class="isActiveTab('/') ? 'btn_tab active' : 'btn_tab'">
             <div class="icon_wrap">
               <img :src="Shiyan2" class="icon" alt="" />
             </div>
@@ -15,26 +15,13 @@
           </div>
         </router-link>
         <router-link to="/oper">
-          <div class="btn_tab">
+          <div :class="isActiveTab('/oper') ? 'btn_tab active' : 'btn_tab'">
             <div class="icon_wrap">
               <img :src="Shiyan2" class="icon" alt="" />
             </div>
             <p class="tab_text">操作记录</p>
           </div>
         </router-link>
-
-        <div class="btn_tab">
-          <div class="icon_wrap">
-            <img :src="Shiyan2" class="icon" alt="" />
-          </div>
-          <p class="tab_text">预设管理</p>
-        </div>
-        <div class="btn_tab">
-          <div class="icon_wrap">
-            <img :src="Shiyan2" class="icon" alt="" />
-          </div>
-          <p class="tab_text">用户管理</p>
-        </div>
       </div>
     </div>
   </div>
@@ -43,6 +30,16 @@
 <script setup>
 import Header from 'cpns/Header'
 import Shiyan2 from '@/assets/img/tab/shiyan2.png'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const isActiveTab = path => {
+  if (path == route.path) {
+    return true
+  }
+  return false
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/pages/OperatingRecord.vue b/src/pages/OperatingRecord.vue
new file mode 100644
index 0000000..298b54b
--- /dev/null
+++ b/src/pages/OperatingRecord.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>123</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/router/index.js b/src/router/index.js
index e765eee..10a114a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 const Main = () => import('@/pages/Main')
+const OperatingRecord = () => import('@/pages/OperatingRecord')
 
 // 配置路由信息
 const routes = [
@@ -8,6 +9,10 @@ const routes = [
     path: '/',
     component: Main,
   },
+  {
+    path: '/oper',
+    component: OperatingRecord,
+  },
 ]
 
 const router = createRouter({
diff --git a/src/style.scss b/src/style.scss
index e69de29..e5df09d 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -0,0 +1,9 @@
+.router-link-active {
+  text-decoration: none;
+  outline: none;
+}
+
+a {
+  text-decoration: none;
+  outline: none;
+}
diff --git a/vite.config.js b/vite.config.js
index 77287b2..d2ed1ac 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -12,6 +12,10 @@ export default defineConfig({
     extensions: ['.js', '.json', '.vue'],
   },
   plugins: [vue()],
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+  },
   //配置sass
   css: {
     preprocessorOptions: {