实现面包屑组件 iview

zongfunday

于 2020-12-30 18:14:47 发布

阅读量471

点赞数

CC 4.0 BY-SA版权

分类专栏： iview 文章标签： vue

本文链接：https://blog.youkuaiyun.com/u014788505/article/details/111995970

iview 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Vue项目中结合iview框架，配置并使用面包屑组件，通过route.js进行设置，实现导航路径的清晰展示。

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

route.js的配置

 {
	path:"/parent",
	name: 'parent',
    component : () => import('@/views/parent.vue'),
    meta: { title: 'parent',path:'/parent' },
    children:[
      {
        path:'child',
        component: () => import ('@/views/child.vue'),
        meta: { title: 'child'},
      }
    ]
  },

组件:

<Breadcrumb style="padding: 20px 0 0 20px;background: #fff;">
  <span class="goback" title="返回上一页" onclick="history.back()">
    <Icon type="md-arrow-back" size="16" />
  </span>
  当前位置：
  <template v-for="(item, index) in breadCrumbList">
    <BreadcrumbItem
      :key="index"
      v-if="item.title"
      :to="{ path: item.path }"
      >{{ item.title }}
    </BreadcrumbItem>
  </template>
</Breadcrumb>
<script>
export default {
  data() {
    return {
      breadCrumbList: [],
    };
  },
  watch: {
    $route(to) {
      console.log(this.$route)
      console.log(this.$route.matched)
      this.breadCrumbList = this.$route.matched
      .map((item) => item.meta)
      console.log(this.breadCrumbList)
    },
  },
};
</script>