组件按需加载

src/components/public/head.vue

@@ -1,7 +1,8 @@
 <template>
     <header class="container-header flexflex">
         <nav class="header-nav flexacenter">
-            <div class="header-nav-item" :class="{ pitch: index == 3 }" v-for="(item, index) in navList" :key="index">{{ item }}</div>
+            <a class="header-nav-item" :class="{ pitch: item['key'] == 'fang' }" v-for="(item, index) in nav" :key="index"
+                :href="item.url" target="_blank">{{ item.name }}</a>
             <img class="header-nav-item header-user-img" :src="user.avatar">
         </nav>
         <div class="logo-box flexacenter">
@@ -10,13 +11,8 @@
         </div>
         <div class="header-bj-box"></div>
 
-
         <nav class="nav-box flexflex" v-if="!isNoTabList">
             <div class="nav-list wid1200 flexflex">
-                <!-- <<<<<<< HEAD
-                <div class="nav-item flexcenter" :class="{ pitch: item['name'] == '我的' }" v-for="item in tabList"
-                    :key="item">{{ item.name }}</div>
-======= -->
                 <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in tabList"
                     :key="i">
                     <el-badge :value="12">
@@ -26,24 +22,27 @@
                     </el-badge>
 
                 </div>
-                <!-- >>>>>>> origin/main -->
             </div>
         </nav>
     </header>
 </template>
 
 <script setup>
-
+import { useStore } from 'vuex'
+import { toRefs } from 'vue';
 // 是否不需要导航栏
 const props = defineProps({
     isNoTabList: {
         type: Boolean,
         default: false
     },
-    user: Object,
+    // user: Object,
 });
 
-const navList = ["寄托首页", "论坛", "Offer榜", "港校租房", "院校库", "兑换店", "搜索", "招生官", "中外合办院校"]
+const store = useStore();
+const { user, nav } = toRefs(store.state);
+
+// const navList = ["寄托首页", "论坛", "Offer榜", "港校租房", "院校库", "兑换店", "搜索", "招生官", "中外合办院校"]
 
 const tabList = [{
     name: '首页',