您好,登錄后才能下訂單哦!
vue element-ui動態(tài)面包屑導(dǎo)航,供大家參考,具體內(nèi)容如下
直接上代碼
一、template代碼
// 這是單獨的組件 <template> <el-breadcrumb separator-class="el-icon-arrow-right"> // 首頁我是寫死的,其他的遍歷出來 <el-breadcrumb-item :to="{ name: 'home' }">首頁</el-breadcrumb-item> // 因為路由是后臺返回的,所以取title是按照后臺格式來取的 <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{ item.meta.title }}</el-breadcrumb-item> </el-breadcrumb> </template>
二、script代碼
export default { // 初始化數(shù)據(jù)對象 data() { return { breadList: [] }; }, // 監(jiān)聽屬性 watch: { // 監(jiān)聽路由 $route(val) { // 調(diào)用獲取路由數(shù)組方法 this.getBreadList(val); } }, // 自定義事件 methods: { /** * @description 獲取路由數(shù)組 * @params val 路由參數(shù) * @author tw */ getBreadList(val) { // 過濾路由matched對象 if (val.matched) { let matched = val.matched.filter(item => item.meta && item.meta.title); // 拿到過濾好的路由v-for遍歷出來 this.breadList = matched; } } } }
三、css代碼
css樣式是放在一個單獨的樣式文件夾里面
/* 面包屑導(dǎo)航 */ .el-breadcrumb { @include ptrbl(16px,16px,16px,16px); box-sizing: border-box; background: $white; border-bottom: 1px solid #EEE; }
以上就是面包屑的制作過程了。
關(guān)于vue.js組件的教程,請大家點擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。