大家好，
我遇到一個麵包屑的問題。
麵包屑，我寫在router/indes.js裡

//router/indes.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    // index
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */ '../Home.vue'),
    meta: {
      breadcrumb: [{
        name: '首頁'
      }]
    }
 },
 {
    path: '/:pathMatch(.*)*',
    redirect: '/'
  }
]
const router = createRouter({
  // 根據指定架站位置的資料夾
  history: createWebHistory('/wifi/'),
  routes
})

export default router

//template(給予字體變色的判斷式)
<template>
  <div class="flex items-center w-full h-10 px-4 bg-gray-200 text-sm">
      <ul class="flex">
          <li class="m-auto text-blue-basic cursor-pointer">
            <router-link to="/">
              <svg class="stroke-current w-3.5 h-3.5 text-blue-basic" fill="#E5E7EB
" stroke-width="4" viewBox="0 0 41 44">
                <!-- glyph stroked home -->
                <path d="M42.723 23.448l-21-22-21 22"></path>
                <path d="M5.723 18.448v24h11v-16h10v16h11v-24"></path>
              </svg>
            </router-link>
          </li>
          //這裡是onClick跟v-for
          <li v-for="(breadcrumb, index) in breadcrumbList" :key="index" @click="routeTo(index)" :class="{'linked': !!breadcrumb.link}">
              <span class="mx-2 text-gray-300">/</span>
              <span class="text-gray-400  cursor-default" v-if="index == breadcrumbList.length-1">
                {{ breadcrumb.name }}
              </span>
              <span class="text-blue-basic cursor-pointer" v-else>
                <span>{{ breadcrumb.name }}</span>
              </span>
          </li>
      </ul>
  </div>
</template>

遇到一個問題，就是相同寫法，
在CompositionAPI裡，剛開啟首頁時，無法顯示麵包屑(進入分頁後都正常)。

//CompositionAPI
<script setup>
  import {ref,watch} from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
 
  //建立麵包屑Array
  const breadcrumbList= ref([])
  const updateList =function () { 
      breadcrumbList.value = route.meta.breadcrumb 
  }
  updateList() 
  console.log( route.meta.breadcrumb) //顯示undefined
  //改變route時
  watch(()=>route.fullPath,()=>{
    breadcrumbList.value = route.meta.breadcrumb
  })

  //onClick 麵包屑li
  const routeTo = function(pRouteTo){
    if (route.meta.breadcrumb[pRouteTo].link){ 
        router.push(route.meta.breadcrumb[pRouteTo].link)
    }
  }
</script>

用console.log(route.meta.breadcrumb)，去抓取meta，顯示undefined。
但是用Options API，剛開啟首頁時，卻可以顯示麵包屑。

//Options API
<script>
export default {
    name:'Breadcrumb',
    data(){
        return{
          breadcrumbList: [],
        }
    },
    mounted () {
      this.updateList() 
    },
    watch: { 
        '$route' () { 
          this.updateList()
        }
    },
    methods: {
        routeTo (pRouteTo) {
            if (this.breadcrumbList[pRouteTo].link) this.$router.push(this.breadcrumbList[pRouteTo].link)
        },
        updateList () { this.breadcrumbList = this.$route.meta.breadcrumb }
    }
}
</script>

-------------更新----------------
【已解決】

所以main.js裡面要修改成

//使用router.isReady()
const app = createApp(App)
app.use(router)
router.isReady().then(()=>app.mount(‘#app’))