<script setup lang="ts"> import { watch, ref, onMounted } from "vue"; import { useRoute } from "vue-router"; const breadcrumbList = ref<any>([]); const $route = useRoute(); onMounted(() => {}); watch( $route, () => { initBreadcrumbList(); }, { deep: true, immediate: true } ); const initBreadcrumbList = () => { breadcrumbList.value = $route.matched; console.log(breadcrumbList.value); }; </script>这段代码为什么报错

这段代码缺少模板部分，只有 `<script>` 标签是不够的。你需要在 `<template>` 中添加需要渲染的内容，例如：

<template>
  <div>
    <ul>
      <li v-for="breadcrumb in breadcrumbList" :key="breadcrumb.path">
        {{ breadcrumb.path }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
  import { watch, ref, onMounted } from "vue";
  import { useRoute } from "vue-router";

  const breadcrumbList = ref<any>([]);
  const $route = useRoute();

  onMounted(() => {});

  watch(
    $route,
    () => {
      initBreadcrumbList();
    },
    { deep: true, immediate: true }
  );

  const initBreadcrumbList = () => {
    breadcrumbList.value = $route.matched;
    console.log(breadcrumbList.value);
  };
</script>

这样就可以正常运行了。