个人端navbar（首页、职位、公司、消息）添加选中样式，加下划线跟字体颜色改变

src/layout/personal/navBar.vue

@@ -19,8 +19,8 @@
           </div>
           <div class="nav">
             <ul>
-              <li v-for="k in list" :key="k.text">
-                <a :href="k.path" style="font-size: 14px;">{{ k.text }}</a>
+              <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>
             </ul>
           </div>
@@ -110,12 +110,13 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { getToken } from '@/utils/auth'
 import { useUserStore } from '@/store/user'
 // import { useLocaleStore } from '@/store/locale'
 import { useI18n } from '@/hooks/web/useI18n'
 import CtDialog from '@/components/CtDialog'
+import { useRoute } from 'vue-router'; const route = useRoute()
 import { useRouter } from 'vue-router'; const router = useRouter()
 import { getUserBindEnterpriseList, getUserRegisterEnterpriseApply } from '@/api/personal/user'
 import MessageNotification from '../message.vue'
@@ -145,12 +146,24 @@ const { t } = useI18n()
 // const localeStore = useLocaleStore()
 const userStore = useUserStore()
 
+const paths = [
+  '/recruitHome',
+  '/recruit/personal/position',
+  '/recruit/personal/company'
+  ]
 const list = ref([
-  { text: t('common.home'), path: '/recruitHome' },
-  { text: t('common.position'), path: '/recruit/personal/position' },
-  { text: t('common.company'), path: '/recruit/personal/company' }
+  { text: t('common.home'), path: paths[0] },
+  { text: t('common.position'), path: paths[1] },
+  { text: t('common.company'), path: paths[2] }
 ])
 
+const routeActive = computed(() => {
+  const index = list.value.findIndex(e => e.path === route.path)
+  console.log('index', index)
+  console.log('1', route.path)
+  return index
+})
+
 const handleLogoClick = () => { window.open('/') } // 点击logo
 const handleSubmit = () => { toEnterprise(radios.value) }
 

src/styles/personal/navBar.scss

@@ -92,6 +92,11 @@
   text-decoration: none;
   color: var(--v-primary-base);
 }
+.routeActive {
+  text-decoration: underline !important;
+  // color: darkblue !important;
+  color: var(--v-error-base) !important;
+}
 .user-nav {
   // position: absolute;
   // right: 0;