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>
</template>

<script>
import Breadcrumb from '@/components/comm/Breadcrumb'
export default {
    components: {
        Breadcrumb
    },
    data() {
        return {

        }
    },
    methods: {

    },
    mounted() {

    }
}
</script>
<style lang='scss' scoped>

</style>

4、展示

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页