Vue3 实现头部面包屑导航

首页 /  列表页 / demo

上代码：

import { useRoute } from "vue-router";
import {watch} from 'vue'
const breadList = ref<string[]>([])
const route = useRoute();

watch(route,()=>{
  if(route.path !=='/login'){  //如果说我要去的页面不是登录页
   breadList.value = []   //先把上次登陆的面包屑数据清空
   breadList.value.push('首页')  //刚一进来 展示的是 ‘首页’ 字样
  // route.matched：当前路由的所有嵌套路径片段的路由记录
   for (let i = 1; i < route.matched.length; i++) {  
 //从1开始循环是因为 如果数组第0项 meta 为空
   let matchedName = route.matched[i].meta.title as string
  breadList.value.push(matchedName)
   }
  }
},{immediate: true, deep: true})   
//深度监听 立即执行  不加这句话 初始化 为空

 <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item,index) in breadList" :key="index">{{item}}
    </el-breadcrumb-item>
  </el-breadcrumb>