ntcri/src/views/CollegeGroup/Main.vue

<script setup>
import { ref, reactive, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useMainStore } from "@/stores/store";
import axios from "axios";
import moment from "moment";
import Navbar from "@/components/Navbar.vue";

const route = useRoute();
const router = useRouter();
const store = useMainStore();

let title = ref("");
title.value = route.meta.title;

// 切換路由時取得 metaTitle
router.beforeEach((to, from) => {
  title.value = to.meta.title;
});

console.log("this.$route.meta.", router);

const path = computed(() => this.$route.matched[0].name);
console.log("path", path);
</script>

<template>
  <div class="college-bg-img">
    <Navbar />
    <v-container fluid class="college-content pb-16 px-lg-0">
      <div class="college-banner">
        <img src="@/assets/img/college-group/banner.png" alt="" />
        <h1>{{ title }}</h1>
      </div>
      <div class="main-block">
        <router-view></router-view>
      </div>
    </v-container>
  </div>
</template>

<style lang="scss" scoped>
.content {
  padding: 0;
  width: 90%;

  @media (max-width: 600px) {
    width: 85%;
  }
  .main-block {
    padding: 100px 80px;
    margin-top: -30%;
    background-color: #fff;

    @media (max-width: 960px) {
      padding: 100px 50px;
    }

    @media (max-width: 600px) {
      padding: 100px 20px;
    }

    h2 {
      font-size: 30px;
      font-weight: 500;
      line-height: 32px;
      margin-left: 10px;

      @media (max-width: 960px) {
        font-size: 24px;
      }

      @media (max-width: 600px) {
        margin-left: 0;
        margin-bottom: 50px;
      }
    }
    .title {
      margin: 80px 0;
      @media (max-width: 600px) {
        margin: 50px 0;
      }
    }
    .v-breadcrumbs {
      position: relative;
      z-index: 100;
      justify-content: flex-start;
      @media (max-width: 600px) {
        justify-content: center;
      }
    }
  }
}
</style>