vue结合iview使用面包屑导航

1、配置路由

{
  path: '/list',
  meta: [{ title: 列表'}],
  name: 'MinePicture',
  component: () => import('../views/lists/list.vue'),
},
{
  path: '/list/detail/:id',
  meta: [{ title: '列表',url:'/list' }, { title: '详情'}],
  name: 'pictureDetail',
  component: () => import('../views/lists/detail.vue'),
},

2、封装组件Breadcrumb.vue

<div class="content_auto">
             <Breadcrumb>
                <BreadcrumbItem to="/">首页</BreadcrumbItem>
                <BreadcrumbItem  v-for="(item,index) in $route.meta" :to="item.url" :key="index">{
  {item.title}}</BreadcrumbItem>
            </Breadcrumb>
        </div>

3、详情页面调用组件

<template>
    <div>
        <Breadcrumb></Breadcrumb>
    </div>