重构公司简介详情页路由传参方式，使用数字编号替代标题

src/views/companyprofil/size1440/index.vue

@@ -137,26 +137,31 @@ const state = reactive({
       title: t("companyprofil.news.carousel.item1.title"),
       subTitle: t("companyprofil.news.carousel.item1.desc"),
       imgUrl: carouselShow1,
+      titleNo: 1,
     },
     {
       title: t("companyprofil.news.carousel.item2.title"),
       subTitle: t("companyprofil.news.carousel.item2.desc"),
       imgUrl: carouselShow2,
+      titleNo: 2,
     },
     {
       title: t("companyprofil.news.carousel.item3.title"),
       subTitle: t("companyprofil.news.carousel.item3.desc"),
       imgUrl: carouselShow3,
+      titleNo: 3,
     },
     {
       title: t("companyprofil.news.carousel.item4.title"),
       subTitle: t("companyprofil.news.carousel.item4.desc"),
       imgUrl: carouselShow4,
+      titleNo: 4,
     },
     {
       title: t("companyprofil.news.carousel.item5.title"),
       subTitle: t("companyprofil.news.carousel.item5.desc"),
       imgUrl: carouselShow5,
+      titleNo: 5,
     },
   ],
 });
@@ -197,7 +202,7 @@ const handleCarouselClick = (item, event) => {
     router.push({
       path: "/companyprofildetail",
       query: {
-        title: item.title,
+        titleNo: item.titleNo ,
       },
     });
   }

src/views/companyprofil/size1920/index.vue

@@ -137,26 +137,31 @@ const state = reactive({
       title: t("companyprofil.news.carousel.item1.title"),
       subTitle: t("companyprofil.news.carousel.item1.desc"),
       imgUrl: carouselShow1,
+      titleNo: 1,
     },
     {
       title: t("companyprofil.news.carousel.item2.title"),
       subTitle: t("companyprofil.news.carousel.item2.desc"),
       imgUrl: carouselShow2,
+      titleNo: 2,
     },
     {
       title: t("companyprofil.news.carousel.item3.title"),
       subTitle: t("companyprofil.news.carousel.item3.desc"),
       imgUrl: carouselShow3,
+      titleNo: 3,
     },
     {
       title: t("companyprofil.news.carousel.item4.title"),
       subTitle: t("companyprofil.news.carousel.item4.desc"),
       imgUrl: carouselShow4,
+      titleNo: 4,
     },
     {
       title: t("companyprofil.news.carousel.item5.title"),
       subTitle: t("companyprofil.news.carousel.item5.desc"),
       imgUrl: carouselShow5,
+      titleNo: 5,
     },
   ],
 });
@@ -197,7 +202,7 @@ const handleCarouselClick = (item, event) => {
     router.push({
       path: "/companyprofildetail",
       query: {
-        title: item.title,
+        titleNo: item.titleNo ,
       },
     });
   }

src/views/companyprofildetail/size1440/index.vue

@@ -11,13 +11,13 @@
     </div>
     <div class="tabs">
       <div class="tab-item" :class="{
-        active: currentTab === 'home',
+        active: currentTab == 'home',
       }" @click="handleTabClick('home')">
         {{ t("home.nav.home") }}
       </div>
       <div class="tab-item" :class="{
         active:
-          currentTab ===
+          currentTab ==
           'companyprofil',
       }" @click="
         handleTabClick(
@@ -28,7 +28,7 @@
       </div>
       <div class="tab-item" :class="{
         active:
-          currentTab === 'businessintroduction',
+          currentTab == 'businessintroduction',
       }" @click="
         handleTabClick('businessintroduction')
         ">
@@ -48,7 +48,7 @@
     <main class="px-[490px] ">
       <section
         className="section-first "
-        v-if="state.pageTitle === t('companyprofildetail.article1.title')"
+        v-if="state.titleNo == 1"
         style="background: #fff"
       >
 
@@ -72,7 +72,7 @@
           <div
             class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
           >
-            <div v-if="state.pageTitle === t('companyprofildetail.article1.title')">
+            <div v-if="state.titleNo == 1">
               <p>{{ t('companyprofildetail.article1.content[0]') }}</p>
               <p>{{ t('companyprofildetail.article1.content[1]') }}</p>
               <p>{{ t('companyprofildetail.article1.content[2]') }}</p>
@@ -90,7 +90,7 @@
 
       <section
         className="section-sec"
-        v-if="state.pageTitle === t('companyprofildetail.article2.title')"
+        v-if="state.titleNo == 2"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center relative z-10 relative z-10">
@@ -113,7 +113,7 @@
           <div
             class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
           >
-            <div v-if="state.pageTitle === t('companyprofildetail.article2.title')">
+            <div v-if="state.titleNo == 2">
               <p>{{ t('companyprofildetail.article2.content[0]') }}</p>
               <p>{{ t('companyprofildetail.article2.content[1]') }}</p>
               <p>{{ t('companyprofildetail.article2.content[2]') }}</p>
@@ -129,7 +129,7 @@
 
       <section
         className="section-third"
-        v-if="state.pageTitle === t('companyprofildetail.article3.title')"
+        v-if="state.titleNo == 3"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center relative z-10 relative z-10">
@@ -152,7 +152,7 @@
           <div
             class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
           >
-            <div v-if="state.pageTitle === t('companyprofildetail.article3.title')">
+            <div v-if="state.titleNo == 3">
               <p>{{ t('companyprofildetail.article3.content[0]') }}</p>
               <p>{{ t('companyprofildetail.article3.content[1]') }}</p>
               <p>{{ t('companyprofildetail.article3.content[2]') }}</p>
@@ -169,7 +169,7 @@
 
       <section
         className="section-four"
-        v-if="state.pageTitle === t('companyprofildetail.article4.title')"
+        v-if="state.titleNo == 4"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center relative z-10 relative z-10">
@@ -192,7 +192,7 @@
           <div
             class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
           >
-            <div v-if="state.pageTitle === t('companyprofildetail.article4.title')">
+            <div v-if="state.titleNo == 4">
               <p>{{ t('companyprofildetail.article4.content[0]') }}</p>
               <p>{{ t('companyprofildetail.article4.content[1]') }}</p>
               <p>{{ t('companyprofildetail.article4.content[2]') }}</p>
@@ -209,7 +209,7 @@
 
       <section
         className="section-five"
-        v-if="state.pageTitle === t('companyprofildetail.article5.title')"
+        v-if="state.titleNo == 5"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center relative z-10 relative z-10">
@@ -232,7 +232,7 @@
           <div
             class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
           >
-            <div v-if="state.pageTitle === t('companyprofildetail.article5.title')">
+            <div v-if="state.titleNo == 5">
               <p>{{ t('companyprofildetail.article5.content[0]') }}</p>
               <p>{{ t('companyprofildetail.article5.content[1]') }}</p>
               <p>{{ t('companyprofildetail.article5.content[2]') }}</p>
@@ -290,20 +290,20 @@ const {
 const router = useRouter();
 
 const state = reactive({
-  pageTitle: "",
+  titleNo: "",
 });
 
 const currentArticleContent = computed(() => {
   const messages = t('companyprofildetail', {}, { resolveComponent: false });
-  if (state.pageTitle === messages.article1.title) {
+  if (state.pageTitle == messages.article1.title) {
     return messages.article1.content;
-  } else if (state.pageTitle === messages.article2.title) {
+  } else if (state.pageTitle == messages.article2.title) {
     return messages.article2.content;
-  } else if (state.pageTitle === messages.article3.title) {
+  } else if (state.pageTitle == messages.article3.title) {
     return messages.article3.content;
-  } else if (state.pageTitle === messages.article4.title) {
+  } else if (state.pageTitle == messages.article4.title) {
     return messages.article4.content;
-  } else if (state.pageTitle === messages.article5.title) {
+  } else if (state.pageTitle == messages.article5.title) {
     return messages.article5.content;
   }
   return [];
@@ -316,7 +316,7 @@ const handleTabClick = (tab) => {
 const { currentTab } = useHome();
 const route = useRoute();
 onBeforeMount(() => {
-  state.pageTitle = route.query.title;
+  state.titleNo = route.query.titleNo;
 });
 onMounted(() => {
   window.scrollTo(0, 0);

src/views/companyprofildetail/size1920/index.vue

@@ -11,13 +11,13 @@
     </div>
     <div class="tabs">
       <div class="tab-item" :class="{
-        active: currentTab === 'home',
+        active: currentTab == 'home',
       }" @click="handleTabClick('home')">
         {{ t("home.nav.home") }}
       </div>
       <div class="tab-item" :class="{
         active:
-          currentTab ===
+          currentTab ==
           'companyprofil',
       }" @click="
         handleTabClick(
@@ -28,7 +28,7 @@
       </div>
       <div class="tab-item" :class="{
         active:
-          currentTab === 'businessintroduction',
+          currentTab == 'businessintroduction',
       }" @click="
         handleTabClick('businessintroduction')
         ">
@@ -48,7 +48,7 @@
     <main class="px-[490px] ">
       <section
         className="section-first "
-        v-if="state.pageTitle === t('companyprofildetail.article1.title')"
+        v-if="state.titleNo == 1"
         style="background: #fff"
       >
 
@@ -72,7 +72,7 @@
           <div
             class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
           >
-            <div v-if="state.pageTitle === t('companyprofildetail.article1.title')">
+            <div v-if="state.titleNo == 1">
               <p>{{ t('companyprofildetail.article1.content[0]') }}</p>
               <p>{{ t('companyprofildetail.article1.content[1]') }}</p>
               <p>{{ t('companyprofildetail.article1.content[2]') }}</p>
@@ -90,7 +90,7 @@
 
       <section
         className="section-sec"
-        v-if="state.pageTitle === t('companyprofildetail.article2.title')"
+        v-if="state.titleNo == 2"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center relative z-10 relative z-10">
@@ -113,7 +113,7 @@
           <div
             class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
           >
-            <div v-if="state.pageTitle === t('companyprofildetail.article2.title')">
+            <div v-if="state.titleNo == 2">
               <p>{{ t('companyprofildetail.article2.content[0]') }}</p>
               <p>{{ t('companyprofildetail.article2.content[1]') }}</p>
               <p>{{ t('companyprofildetail.article2.content[2]') }}</p>
@@ -129,7 +129,7 @@
 
       <section
         className="section-third"
-        v-if="state.pageTitle === t('companyprofildetail.article3.title')"
+        v-if="state.titleNo == 3"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center relative z-10 relative z-10">
@@ -152,7 +152,7 @@
           <div
             class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
           >
-            <div v-if="state.pageTitle === t('companyprofildetail.article3.title')">
+            <div v-if="state.titleNo == 3">
               <p>{{ t('companyprofildetail.article3.content[0]') }}</p>
               <p>{{ t('companyprofildetail.article3.content[1]') }}</p>
               <p>{{ t('companyprofildetail.article3.content[2]') }}</p>
@@ -169,7 +169,7 @@
 
       <section
         className="section-four"
-        v-if="state.pageTitle === t('companyprofildetail.article4.title')"
+        v-if="state.titleNo == 4"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center relative z-10 relative z-10">
@@ -192,7 +192,7 @@
           <div
             class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
           >
-            <div v-if="state.pageTitle === t('companyprofildetail.article4.title')">
+            <div v-if="state.titleNo == 4">
               <p>{{ t('companyprofildetail.article4.content[0]') }}</p>
               <p>{{ t('companyprofildetail.article4.content[1]') }}</p>
               <p>{{ t('companyprofildetail.article4.content[2]') }}</p>
@@ -209,7 +209,7 @@
 
       <section
         className="section-five"
-        v-if="state.pageTitle === t('companyprofildetail.article5.title')"
+        v-if="state.titleNo == 5"
         style="background: #fff"
       >
         <div class="flex flex-wrap justify-center relative z-10 relative z-10">
@@ -232,7 +232,7 @@
           <div
             class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
           >
-            <div v-if="state.pageTitle === t('companyprofildetail.article5.title')">
+            <div v-if="state.titleNo == 5">
               <p>{{ t('companyprofildetail.article5.content[0]') }}</p>
               <p>{{ t('companyprofildetail.article5.content[1]') }}</p>
               <p>{{ t('companyprofildetail.article5.content[2]') }}</p>
@@ -290,20 +290,20 @@ const {
 const router = useRouter();
 
 const state = reactive({
-  pageTitle: "",
+  titleNo: "",
 });
 
 const currentArticleContent = computed(() => {
   const messages = t('companyprofildetail', {}, { resolveComponent: false });
-  if (state.pageTitle === messages.article1.title) {
+  if (state.pageTitle == messages.article1.title) {
     return messages.article1.content;
-  } else if (state.pageTitle === messages.article2.title) {
+  } else if (state.pageTitle == messages.article2.title) {
     return messages.article2.content;
-  } else if (state.pageTitle === messages.article3.title) {
+  } else if (state.pageTitle == messages.article3.title) {
     return messages.article3.content;
-  } else if (state.pageTitle === messages.article4.title) {
+  } else if (state.pageTitle == messages.article4.title) {
     return messages.article4.content;
-  } else if (state.pageTitle === messages.article5.title) {
+  } else if (state.pageTitle == messages.article5.title) {
     return messages.article5.content;
   }
   return [];
@@ -316,7 +316,7 @@ const handleTabClick = (tab) => {
 const { currentTab } = useHome();
 const route = useRoute();
 onBeforeMount(() => {
-  state.pageTitle = route.query.title;
+  state.titleNo = route.query.titleNo;
 });
 onMounted(() => {
   window.scrollTo(0, 0);