前端面包屑导航的，导航内容从何而来

任务：完成面包屑导航功能

      首先 使用组件库提供的面包屑，调整好样式后就可以考虑如何获取当前导行的面包屑数据，由于面包屑与路由有关所以我们可以把面包屑的数据存储在路由中，在前端的router.ts文件中

在路由配置文件中添加meta属性用来存储面包屑信息，然后在一个封装好的头部文件中获取面包屑数据即可

<script setup lang="ts">

import {useRouter, useRoute} from 'vue-router'
import {ref,watch} from 'vue';

const route = useRoute()
const dynamicRoutes =  ref<any>([]) //创建响应式的面包屑数组


/**
* 监听路由变化实时获取数据
*/
watch(
    () => route.meta,
    (meta) => {
      if(meta.breadcrumb){
        dynamicRoutes.value = meta.breadcrumb
      }else{
        dynamicRoutes.value= []
      }
      // console.log("route=======>"+JSON.stringify(jumpList));
    }
)

</script>

最后在标签组件中使用即可。