面包屑导航展示（vue）

使用vue-router，Element Plus完成面包屑，示例为后台管理系统（vue3）

template：

      <el-breadcrumb>
        <template v-for="(item, index) in breadList" :key="index">
          <el-breadcrumb-item v-if="item.name" :key="index">{{
            item.meta.title
          }}</el-breadcrumb-item>
        </template>
      </el-breadcrumb>

script

import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const breadList = ref()
const getMatched = () => {
  breadList.value = route.matched.filter((item) => item.meta && item.meta.title)
}
onMounted(() => {
  getMatched()
})
watch(
  () => route.path,  // 监听路由变化改变面包屑
  (newval, oldval) => {
    getMatched()
  }
)

效果