选中样式

src/layout/personal/navBar.vue

@@ -19,8 +19,8 @@
           </div>
           <div class="nav">
             <ul>
-              <li v-for="(k, listIndex) in list" :key="k.text">
-                <a :href="k.path" style="font-size: 14px;" :class="{'routeActive': listIndex === routeActive}">{{ k.text }}</a>
+              <li v-for="(k, listIndex) in list" :key="k.text" :class="{'routeActive': routeActive === listIndex}">
+                <a :href="k.path" style="font-size: 14px;" class="aLink">{{ k.text }}</a>
               </li>
             </ul>
           </div>
@@ -93,7 +93,7 @@
             >
               <v-btn class="ml-1" size="small" icon="mdi-bell-outline" @click="router.push({ path: '/recruit/personal/message' })"></v-btn>
             </v-badge> -->
-            <message-notification v-if="showBall" path="/recruit/personal/message"></message-notification>
+            <message-notification v-if="showBall" :path="paths[3]" :class="{'routeActive': routeActive === 3}"></message-notification>
             
           </div>
         </div>
@@ -149,7 +149,8 @@ const userStore = useUserStore()
 const paths = [
   '/recruitHome',
   '/recruit/personal/position',
-  '/recruit/personal/company'
+  '/recruit/personal/company',
+  '/recruit/personal/message',
   ]
 const list = ref([
   { text: t('common.home'), path: paths[0] },
@@ -158,9 +159,7 @@ const list = ref([
 ])
 
 const routeActive = computed(() => {
-  const index = list.value.findIndex(e => e.path === route.path)
-  console.log('index', index)
-  console.log('1', route.path)
+  const index = paths.findIndex(item => item === route.path)
   return index
 })
 

src/styles/personal/navBar.scss

@@ -92,10 +92,12 @@
   text-decoration: none;
   color: var(--v-primary-base);
 }
-.routeActive {
-  text-decoration: underline !important;
-  // color: darkblue !important;
+.routeActive { // 选中样式
   color: var(--v-error-base) !important;
+  .aLink {
+    color: var(--v-error-base) !important;
+    text-decoration: underline !important;
+  }
 }
 .user-nav {
   // position: absolute;