基于vue和iview实现面包屑路由导航

先给大家看一下实现的效果：

我使用的实现方法需要自己手动配置每一个页面的面包屑所对应的路由。

首先我们在index.js中配置好每一个页面所对应的名称和路由。

自己配置的内容在属性meta中，name中配置的就是我们所显示的面包屑的名称，path是每一个名称所对应的路由。

然后是面包屑组件Breadcrumb.vue所对应的代码，

使用了计算属性computed来得到名称所对应的路由赋值给面包屑的to属性。

<template>
    <div class='breadcrumb' >
        <Breadcrumb>
            <BreadcrumbItem :to="path(index)" v-for="(item, index) in $route.meta.name" :key="index">
                {{item}}
            </BreadcrumbItem>
        </Breadcrumb>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                
            }
        },
        methods:{
        },
        computed:{
            path(){
                return function(index){
                    return this.$route.meta.path[index];
                }
            }
        },
        watch:{
        },
    }
</script>

项目的完整代码：GitHub：https://github.com/PrincipleAdd/VueProjectExample