如何在router-view外部组件中通过useRoute获取当前路由

处于<router-view />外部的组件，完全可以正常通过useRoute()方法获取当前路由信息。你遇到route.name打印为undefined的问题，和组件放置在<router-view>外部无关，本质是读取路由属性的时机错误。
你在<script setup>顶层同步执行打印逻辑时，路由还未完成首次初始化解析，此时响应式的route对象还没被注入首次路由匹配的结果，自然读不到name属性。
你完全不需要在每个视图组件里重复引入<Breadcrumbs />，在App.vue全局挂载一次的思路是对的，只需要调整路由信息的读取方式即可，以下是两种可直接落地的方案：

方案1：在响应式上下文中读取路由属性 #

useRoute()返回的是全响应式对象，只要在响应式上下文（计算属性、监听器、模板）中访问属性，就能自动跟随路由变化更新，不需要关心初始化时机：

<!-- Breadcrumbs.vue -->
<script setup>
import { useRoute } from 'vue-router'
import { computed, watch } from 'vue'

const route = useRoute()

// 计算属性派生面包屑数据，自动响应路由变化
const breadcrumbList = computed(() => {
  return route.matched
})

// 需要执行副作用逻辑时用watch监听，immediate: true会在初始化时立即执行一次
watch(() => route.name, (currentName) => {
  console.log('当前路由名：', currentName)
}, { immediate: true })
</script>

<template>
  <!-- 模板中直接访问属性会自动更新 -->
  <div class="breadcrumbs">
    <span v-for="item in breadcrumbList" :key="item.path">{{ item.name }}</span>
  </div>
</template>

方案2：等待路由初始化完成后读取初始值 #

如果需要在脚本顶层同步拿到首次加载的路由值，可以等待路由实例完成就绪状态后再读取：

<!-- Breadcrumbs.vue -->
<script setup>
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 等待路由完成首次解析
await router.isReady()
// 此时读取可以拿到正确的初始路由值
console.log(route.name)
</script>

内容的提问来源于stack exchange，提问作者Ian Davis