解决导航栏显示上次打开所有导航栏记录bug

src/layouts/admin/components/navBar/classic.vue

@@ -1,21 +1,28 @@
 <template>
-    <div class='nav-bar'>
-        <div v-if='config.layout.shrink && config.layout.menuCollapse' class='unfold'>
-            <Icon @click='onMenuCollapse' name='fa fa-indent' :color="config.getColorVal('menuActiveColor')"
-                  size='18' />
+    <div class="nav-bar">
+        <div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
+            <Icon
+                @click="onMenuCollapse"
+                name="fa fa-indent"
+                :color="config.getColorVal('menuActiveColor')"
+                size="18"
+            />
         </div>
+        <!-- <span class="nav-bar-title">{{ getTheme.name }}</span> -->
         <span class='nav-bar-title'>电能质量数据监测云平台</span>
         <NavMenus />
     </div>
 </template>
 
-<script setup lang='ts'>
+<script setup lang="ts">
+import { onMounted } from 'vue'
 import { useConfig } from '@/stores/config'
 import NavTabs from '@/layouts/admin/components/navBar/tabs.vue'
 import NavMenus from '../navMenus.vue'
 import { showShade } from '@/utils/pageShade'
 
 const config = useConfig()
+const getTheme = JSON.parse(window.localStorage.getItem('getTheme') as string)
 
 const onMenuCollapse = () => {
     showShade('ba-aside-menu-shade', () => {
@@ -23,9 +30,12 @@ const onMenuCollapse = () => {
     })
     config.setLayout('menuCollapse', false)
 }
+// onMounted(() => {
+//     document.title = getTheme.name
+// })
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .nav-bar {
     display: flex;
     align-items: center;
@@ -37,7 +47,7 @@ const onMenuCollapse = () => {
         color: v-bind('config.getColorVal("headerBarTabColor")');
         font-size: 24px;
         margin-left: 10px;
-        font-weight: 700
+        font-weight: 700;
     }
 
     :deep(.nav-tabs) {
@@ -68,7 +78,7 @@ const onMenuCollapse = () => {
                 color: v-bind('config.getColorVal("headerBarTabActiveColor")');
 
                 .close-icon {
-                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;;
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
                 }
             }
 
@@ -77,7 +87,7 @@ const onMenuCollapse = () => {
                 background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
 
                 .close-icon {
-                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;;
+                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
                 }
             }
         }

src/layouts/admin/components/navBar/tabs.vue

@@ -1,31 +1,31 @@
 <template>
-    <div class='nav-tabs' ref='tabScrollbarRef'>
+    <div class="nav-tabs" ref="tabScrollbarRef">
         <div
-            v-for='(item, idx) in navTabs.state.tabsView'
-            @click='onTab(item)'
-            @contextmenu.prevent='onContextmenu(item, $event)'
-            class='ba-nav-tab'
+            v-for="(item, idx) in navTabs.state.tabsView"
+            @click="onTab(item)"
+            @contextmenu.prevent="onContextmenu(item, $event)"
+            class="ba-nav-tab"
             :class="navTabs.state.activeIndex == idx ? 'active' : ''"
-            :ref='tabsRefs.set'
-            :key='idx'
+            :ref="tabsRefs.set"
+            :key="idx"
         >
             {{ item.meta.title }}
-            <transition @after-leave='selectNavTab(tabsRefs[navTabs.state.activeIndex])' name='el-fade-in'>
+            <transition @after-leave="selectNavTab(tabsRefs[navTabs.state.activeIndex])" name="el-fade-in">
                 <Icon
-                    v-show='navTabs.state.tabsView.length > 1'
-                    class='close-icon'
-                    @click.stop='closeTab(item)'
-                    size='15'
-                    name='el-icon-Close'
+                    v-show="navTabs.state.tabsView.length > 1"
+                    class="close-icon"
+                    @click.stop="closeTab(item)"
+                    size="15"
+                    name="el-icon-Close"
                 />
             </transition>
         </div>
-<!--        <div :style='activeBoxStyle' class='nav-tabs-active-box'></div>-->
+        <!--        <div :style='activeBoxStyle' class='nav-tabs-active-box'></div>-->
     </div>
-    <Contextmenu ref='contextmenuRef' :items='state.contextmenuItems' @contextmenuItemClick='onContextmenuItem' />
+    <Contextmenu ref="contextmenuRef" :items="state.contextmenuItems" @contextmenuItemClick="onContextmenuItem" />
 </template>
 
-<script setup lang='ts'>
+<script setup lang="ts">
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter, onBeforeRouteUpdate, type RouteLocationNormalized } from 'vue-router'
 import { useConfig } from '@/stores/config'
@@ -85,7 +85,7 @@ const onContextmenu = (menu: RouteLocationNormalized, el: MouseEvent) => {
 }
 
 // tab 激活状态切换
-const selectNavTab = function(dom: HTMLDivElement) {
+const selectNavTab = function (dom: HTMLDivElement) {
     if (!dom) {
         return false
     }
@@ -169,7 +169,7 @@ const onContextmenuItem = async (item: ContextmenuItemClickEmitArg) => {
     }
 }
 
-const updateTab = function(newRoute: RouteLocationNormalized) {
+const updateTab = function (newRoute: RouteLocationNormalized) {
     // 添加tab
     navTabs.addTab(newRoute)
     // 激活当前tab
@@ -181,7 +181,10 @@ const updateTab = function(newRoute: RouteLocationNormalized) {
 }
 
 onBeforeRouteUpdate(async to => {
-    updateTab(to)
+   
+
+        updateTab(to)
+   
 })
 
 onMounted(() => {
@@ -190,7 +193,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .dark {
     .close-icon {
         color: v-bind('config.getColorVal("headerBarTabColor")') !important;