fix: 修复导航栏跳转异常的问题

src/components/Navigation/Index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 const router = useRouter();
@@ -14,7 +14,7 @@ const navigation = ref([
     },
     // icon: '/tabbar/home.png',
     icon: 'home-o',
-    inactive:''
+    inactive: ''
   },
   {
     title: '伊调研',
@@ -22,7 +22,7 @@ const navigation = ref([
     //   name: 'home',
     //   path: '/home'
     // },
-    // icon: '/tabbar/yl.png'
+    icon: '/tabbar/yl.png'
   },
   {
     title: '我的',
@@ -30,14 +30,16 @@ const navigation = ref([
       name: '',
       path: '/survey'
     },
-    icon:'friends-o',
+    icon: 'friends-o'
     // icon: '/tabbar/mine.png'
   }
 ]);
 
 // 当前的 nav
-const currentNav = navigation.value.find((item) => item.link.path === route.fullPath);
-const activeTab = ref(currentNav?.title);
+const currentNav = computed(() =>
+  navigation.value.find((item) => item?.link?.path === route.fullPath)
+);
+const activeTab = ref(currentNav.value?.title);
 
 /**
  * Handle changing of navigation
@@ -47,42 +49,50 @@ function handleChangeNav(title: string) {
   const nav = navigation.value.find((item) => item.title === title);
   const params: { [key: string]: string } = {};
   //  如果有 name 表示，优先取 name 参数
-  nav && nav.link.name.length !== 0
-    ? (params.name = nav.link.name as string)
-    : (params.path = nav?.link.path as string);
+  nav && nav.link?.name.length !== 0
+    ? (params.name = nav?.link?.name as string)
+    : (params.path = nav?.link?.path as string);
   router.push(params);
 }
 
-watch(activeTab, (value: string) => {
-  handleChangeNav(value);
+watch(activeTab, (value) => {
+  handleChangeNav(value as string);
 });
 </script>
 
 <template>
-  <div class="navigation">
-    {{activeTab}}
-    <van-tabbar v-model="activeTab">
-      <van-tabbar-item v-for="item in navigation"
-                       :icon="item.icon" :key="item.title" :name="item.title">
-<!--        <template #icon="props">-->
-<!--          <img :src="props.active ? icon.icon : icon.inactive" />-->
-<!--        </template>-->
+  <van-tabbar v-model="activeTab" class="navigation">
+    <template v-for="(item, index) in navigation" :key="item.title">
+      <span
+        v-if="index === 1"
+        style="
+          display: flex;
+          flex-flow: column nowrap;
+          justify-content: center;
+          align-items: center;
+        "
+      >
+        <img :src="item.icon" alt="" style="width: 30px; height: 30px" />
+        {{ item.title }}
+      </span>
+      <van-tabbar-item v-else :icon="item.icon" :name="item.title">
         {{ item.title }}
       </van-tabbar-item>
-    </van-tabbar>
-  </div>
+    </template>
+  </van-tabbar>
 </template>
 
 <style scoped lang="scss">
 .navigation {
-  width: 100vw;
-  background-color: white;
-  display: flex;
-  flex-flow: row;
-  justify-content: space-around;
-  position: fixed;
-  bottom: 0px;
-  z-index: 10;
+  padding: 3px 0;
+  // width: 100vw;
+  // background-color: white;
+  // display: flex;
+  // flex-flow: row;
+  // justify-content: space-around;
+  // position: fixed;
+  // bottom: 0px;
+  // z-index: 10;
 }
 
 .navigation-item {