【无标题】

quanmeiren

于 2023-07-18 19:03:15 发布

阅读量45

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/quanmeiren/article/details/131794287

版权

<template>
  <div class="navs">
    <el-header>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in list" :key="item.path" :to="item.path">{{ item.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    list() {
      return this.$route.matched
        .filter(item => item.meta.title)
        .map(item => ({
          title: item.meta.title,
          path: item.path
        }));
    }
  }
};
</script>

<style lang="scss" scoped>
.el-header {
  padding: 20px;
}
.navs {
  height: 100px;
  width: 100%;
  background-color: brown;
}
</style>
![dongtai](https://img-blog.csdnimg.cn/d70b2592d9504dc7ad6e7a8c50b254ac.png)
面包导航的使用
![在这里插入图片描述](https://img-blog.csdnimg.cn/375e47ccab1b46eabeadaa73fbe5c0ec.png)