vue iview面包屑

　　簡單看一下vue，iview的面包屑怎么寫呢？

　　簡單的思路：1.獲取到路由記錄$route.matched 2.渲染

　　效果：

        

 

 

　　一、$route.matched

　　　　官網地址：https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7

　　

 

　　二、渲染

　　代碼貼下面：

<template>
    <div>
        <Breadcrumb>
            <BreadcrumbItem v-for="(item,index) in list" :key="index">{{item.name}}</BreadcrumbItem>
        </Breadcrumb>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: []  // 容器
        }
    },
    watch:{
        $route(){   // 監聽路由變化
            this.list = []
            this.list = this.$route.matched
        }
    },
    mounted(){  // 刷新時
        this.list = this.$route.matched
    }
}
</script>

　　修改分割符號，方法如圖標記。動態跳轉加 :to。更多用法在官網地址：https://www.iviewui.com/components/breadcrumb