heritage-hub/src/views/homepage.vue

<template>
  <div style="min-height:100vh"
       class="100vw">
    <div style="height:80px;background:#000;"
         class="color-white row items-center">
      <div class="col-4 row items-center justify-center"><img src="../assets/images/icon-title.png"
             style="width:40px;height:40px" /><span class="fl-ml-sm">延庆博物馆</span></div>

      <div class="col-6 row justify-around items-center">

        <div class="cursor header-title"
             @click="handkeLink('/home/navigation')">首页</div>
        <div class="cursor header-title"
             @click="handkeLink('')">导航</div>
        <div class="cursor header-title"
             @click="handkeLink('')">展览</div>
        <div class="cursor header-title"
             @click="handkeLink('')">典藏</div>
        <div class="cursor header-title"
             @click="handkeLink('')">资讯</div>
        <div class="cursor header-title"
             @click="handkeLink('')">文创</div>
        <div class="cursor header-title"
             @click="handkeLink('')">数字文脉</div>
        <div class="cursor header-title"
             @click="handkeLink('/about/statutes')">关于</div>
      </div>
    </div>
    <div>
      <router-view></router-view>
    </div>

    <div style="height:187px;background:#000;"
         class="row justify-center color-white">
      <div class="col-6 row justify-around fl-mt-lg">
        <div class="cursor">首页</div>
        <div class="cursor">导航</div>
        <div class="cursor">展览</div>
        <div class="cursor">典藏</div>
        <div class="cursor">资讯</div>
        <div class="cursor">文创</div>
        <div class="cursor">数字文脉</div>
        <div class="cursor">关于</div>
      </div>
    </div>
  </div>
</template>
<script setup>

import {
  ref,
  reactive,
  onBeforeMount,
  getCurrentInstance,
  watch,
  nextTick,
} from "vue";
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const state = reactive({
  activePage: '',
});
onBeforeMount(() => {
  const currentPath = route.path;
  state.activePage = currentPath;
})


const handkeLink = (url) => {
  if (url) {
    router.push(url)
    state.activePage = url;
  } else {
    router.push('/common/staytuned')
  }
}
</script>

<style scoped>
.header-title {
  padding: 4px 18px;
  border-radius: 25px;
}
.header-title:hover {
  background: #3d8873;
}
</style>