123

src/common/utils.js

@@ -168,3 +168,74 @@ export const totalPageAni = async (activeIndex, previousIndex) => {
     animateCSS('#contact_hand', aniName)
   }
 }
+
+export const addAnchor = activeIndex => {
+  if (activeIndex == 0) {
+    var url = location.pathname + '#home'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 1) {
+    var url = location.pathname + '#service'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 2) {
+    var url = location.pathname + '#cooperation'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 3) {
+    var url = location.pathname + '#caselist'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 4) {
+    var url = location.pathname + '#casedetail'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 5) {
+    var url = location.pathname + '#hardware'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 6) {
+    var url = location.pathname + '#harddetail'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 7) {
+    var url = location.pathname + '#experience'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 8) {
+    var url = location.pathname + '#hardwareshow'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 9) {
+    var url = location.pathname + '#webofthing'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 10) {
+    var url = location.pathname + '#control'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 11) {
+    var url = location.pathname + '#drive'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 12) {
+    var url = location.pathname + '#readwidely'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 13) {
+    var url = location.pathname + '#culture'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 14) {
+    var url = location.pathname + '#recruit'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 15) {
+    var url = location.pathname + '#video'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+  if (activeIndex == 16) {
+    var url = location.pathname + '#contact'
+    history.pushState({ url: url, title: document.title }, document.title, url)
+  }
+}

src/router/index.js

@@ -1,4 +1,4 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 
 // 配置路由信息
 const routes = [
@@ -37,7 +37,7 @@ const routes = [
 
 const router = createRouter({
   routes,
-  history: createWebHashHistory(),
+  history: createWebHistory(),
 })
 
 export default router

src/views/Index/index.vue

@@ -96,7 +96,7 @@ import SoftHardwareDetail from '@/views/Index/components/SoftHardwareDetail'
 import Cooperation from '@/views/Index/components/Cooperation'
 import MechanicalDrive from '@/views/Index/components/MechanicalDrive'
 import IntroVideo from '@/views/Index/components/IntroVideo'
-import { totalPageAni } from '@/common/utils'
+import { totalPageAni, addAnchor } from '@/common/utils'
 // Import Swiper styles
 import 'swiper/css'
 import 'swiper/css/pagination'
@@ -130,12 +130,14 @@ export default {
       const swiperStore = useSwiperStore()
       swiperStore.initSwiper(swiper)
       totalPageAni(activeIndex, previousIndex)
+      addAnchor(activeIndex)
     }
     const virtualOption = {
       enabled: true,
     }
     const onSlideChange = swiper => {
       const { activeIndex, previousIndex } = swiper
+      addAnchor(activeIndex)
       const swiperStore = useSwiperStore()
       const countStore = useCountStore()
       swiperStore.initSwiper(swiper)