router link

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>

src/pages/OperatingRecord.vue

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

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({

src/style.scss

@@ -0,0 +1,9 @@
+.router-link-active {
+  text-decoration: none;
+  outline: none;
+}
+
+a {
+  text-decoration: none;
+  outline: none;
+}

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: {