廢話不多說，先展示有問題效果圖，看是否和我的情況一樣：

展示我的程式碼：我只是展示一下我的思路，有問題可以@我

路由部分

 {
      path:"/",//訪問路徑
      name:'Home',//路由名稱
      component:()=>import ("@/views/Home")  //訪問對應元件 ,動態匯入元件，傳統的匯入元件，造成記憶體資源浪費  
    },
    {
      path:"/ClassRoom",
      name:'classroom',
      component:()=>import ("@/views/ClassRoom"),
      //redirect:'/ClassRoom/Learing',
      children:[
        {
          path:"/",
          name:'learing',
          component:()=>import ("@/components/ClassRoom/Course/Learing"),
        },
        {
          path:"/ClassRoom/Endlearing",
          name:'endlearing',
          component:()=>import ("@/components/ClassRoom/Course/Endlearing"),
        }
      ]          
    },
   
    {
      path:"/OpenCourses",
      name:'opencourses',
      component:()=>import ("@/views/OpenCourses") 
    },

    {
      path:"/Resources",
      name:'resources',
      component:()=>import ("@/views/Resources")
    },
    {
      path:"/Resources/ResourcesDetail",
      name:'resourcesdetail',
      component:()=>import ("@/components/ResourcesDetail")
    },
    {
      path:"/OpenResourcesDetail",
      name:'openresourcesdetail',
      component:()=>import ("@/components/OpenCLass/ResourcesDetail")
    
    },
 

<ul class="headerNav">
                 <li id="li-action" v-for="(item,index) in headlist" :key="index">
                     <router-link :to="{name:item.url}">{{item.head}}</router-link>
                     <!-- <span :class="{active_span:isChecked == index}"></span> 
 
-->
                 </li>
            
 </ul>

data() {
      return {
          headlist:[
              {id:1,head:'首頁',url:"Home"},
              {id:2,head:'學習中心',url:"classroom"},
              {id:3,head:'視訊資源',url:"resources"},
              {id:4,head:'公開課',url:"opencourses"}
          ],
          isChecked:0,
          isLocalUser:null//判斷本地是否有使用者名稱
      }
   },
/* 標題選中的樣式 */
.headerNav li .router-link-exact-active{
    font-size: 22px !important;
    font-weight:bold !important;
    color: #347ABB !important;
    border-bottom: 5px solid #0059c5;
    box-sizing: border-box;
}
 

解決問題後的效果：

展示我的程式碼

<ul class="headerNav">
                  <!-- 單獨把首頁寫了一行加了一個屬性exact，讓預設false，不然你選中別的標題，首頁會一直選中，注意，上一份是寫在data裡面，直接遍歷的 -->
                  <li id="li-action">
                       <router-link :to="{name:'Home'}" exact>首頁</router-link>
                  </li>
                 <li id="li-action" v-for="(item,index) in headlist" :key="index">
                     <router-link :to="{name:item.url}">{{item.head}}</router-link>
                     <!-- <span :class="{active_span:isChecked == index}"></span> -->
                 </li>
            
              </ul>

headlist:[
              {id:1,head:'學習中心',url:"classroom"},
              {id:2,head:'視訊資源',url:"resources"},
              {id:3,head:'公開課',url:"opencourses"}
          ],

/* 標題選中的樣式  類名改變了，注意看*/
.headerNav li .router-link-active{
    font-size: 22px !important;
    font-weight:bold !important;
    color: #347ABB !important;
    border-bottom: 5px solid #0059c5;
    box-sizing: border-box;
}

如果我解釋的不清楚，請參考：https://www.cnblogs.com/lisiyang/p/7867544.html