Vue3顶部面包屑

最新推荐文章于 2024-10-10 11:11:44 发布

点点关注不迷路

最新推荐文章于 2024-10-10 11:11:44 发布

阅读量189

点赞数

分类专栏： vue 文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_51526447/article/details/129101657

版权

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在Vue应用中利用vue-router为路由添加meta信息，如在订单管理页面示例中设置`title`。同时展示了在Header组件中实现面包屑导航，遍历matched数组以显示当前路径的所有父级页面的meta.title。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给路由添加meta属性

     {
                path: '/order',
                name: 'order',
                meta: {title: "订单管理"},
                component: () => import('../views/order/index.vue'),
            },

在header部分加入面包屑

<template>
  <div>
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item v-for="v in lists" :key="v.path" >{{v.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script setup>
import {onMounted, ref, watch} from 'vue';
import {useRouter,useRoute} from 'vue-router'
const route = useRoute();
const router = useRouter();
const lists = ref([]);
onMounted(()=>{
  console.log(route.matched)
  lists.value = route.matched
})
watch(route,(to,from)=>{
  getBreadcrumb(to.matched);
})
function getBreadcrumb(matched){
  lists.value=route.matched
}

</script>