vue结合iview使用面包屑导航

最新推荐文章于 2025-09-26 03:23:25 发布

原创最新推荐文章于 2025-09-26 03:23:25 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中结合iView框架实现面包屑导航功能，包括配置路由、封装Breadcrumb组件以及在详情页面调用组件进行展示的步骤。

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、展示