<template>
    <nav class="model-breadcrumbs">
        <ol>
            <li style="display:inline-block;" v-for="(item,index) in routes" :key="index">
                <router-link style="color:#333" v-if="item.link" :to="item.link">{{item.name}}<span style="margin:0 .4em;">></span></router-link>
                <span v-else>{{item.name}}</span>
            </li>
        </ol>
    </nav>
</template>
<script>
export default {
    props:{
        routes:{
            type:Array,
            default:function(){
                return []
            }
        }
    }
}
</script>

<style scoped>
.model-breadcrumbs{
    padding:15px;
    border: 1px solid #dae1f2;
    font-size:16px;
    background: white;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    color:#333;
}
</style>
