vue利用meta做动态面包屑

最新推荐文章于 2025-04-06 19:32:36 发布

风吹头皮凉

最新推荐文章于 2025-04-06 19:32:36 发布

阅读量605

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43959276/article/details/110823106

版权

本文展示了如何使用Element-UI和基础CSS分别创建面包屑导航组件，并提供了相应的JS代码来获取和处理路由信息。组件在路由变化时自动更新，并在`router`文件中定义了相关路由。

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

**单独编写一个组件文件 Breadrumb.vue**
**第一套样式采用element-ui的样式**
  <div class="example-container">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item,index) in breadList"
          :key="item.name"
          :to="{ path: item.path }"
        >{{item.meta.title}}</el-breadcrumb-item>
      </el-breadcrumb>
     </div>
**第二套基础css样式**
 <div >
        <span v-for="(item,index) in breadList">
          <router-link :to="{path:item.path}" :key="item.path" style="color:#09C762">
          <span>{{item.meta.title}}</span>
          <template>{{index !== breadList.length - 1 ? '/' : ''}}</template>
          </router-link>
          <span v-if="index == breadList.length">{{item.meta.title}}</span>
        </span>
      </div>   
**js部分**
<script>
  export default {
    data() {
      return {
        breadList: [] // 路由集合
      };
    },
    watch: {
      $route() {
        this.getBreadcrumb();
      }
    },
    methods: {
      isHome(route) {
        return route.name === "Index";
      },
      getBreadcrumb() {
        let matched = this.$route.matched;
        //如果不是首页就拼接路由
        if (!this.isHome(matched[0])) {
          matched = [{ path: "/", meta: { title: "首页" } }].concat(matched);
        }
        this.breadList = matched;

      }
    },
    created() {
      this.getBreadcrumb();
    }
  }
</script>

**router文件**
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index,
       meta: { title: '首页' }
    },
    {
      path: '/goodsDetails',
      name: 'GoodsDetails',
      component: GoodsDetails,
      meta: { title: '商品详情' },
       children: [{
      path: '/keyard',
      name: 'keyard',
      component: keyard,
       meta: { title: '商品系统' },
    }]
    }
   ]
})

**文件引用*
<template>
<div>
 <Breadrumb></Breadrumb>
</div>
</template>
<script>
import Breadrumb from '@/components/Breadrumb.vue'
components: {
      Breadrumb
    }
</script>