vue element-ui實現(xiàn)動態(tài)面包屑導航
更新時間：2019年12月23日 16:05:25 作者：一入坑不回頭
這篇文章主要為大家詳細介紹了vue element-ui實現(xiàn)動態(tài)面包屑導航，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
vue element-ui動態(tài)面包屑導航，供大家參考，具體內(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樣式是放在一個單獨的樣式文件夾里面
/* 面包屑導航 */
.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組件學習教程進行學習。
更多vue學習教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue 雙向數(shù)據(jù)綁定的實現(xiàn)學習之監(jiān)聽器的實現(xiàn)方法
這篇文章主要介紹了vue 雙向數(shù)據(jù)綁定的實現(xiàn)學習之監(jiān)聽器的實現(xiàn)方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
ue-bus 提供了一個全局事件中心，并將其注入每一個組件，你可以像使用內(nèi)置事件流一樣方便的使用全局事件。這篇文章給大家介紹了vue bus全局事件中心簡單Demo，需要的朋友參考下吧2018-02-02
Vue3組件不發(fā)生變化如何監(jiān)聽pinia中數(shù)據(jù)變化
這篇文章主要給大家介紹了關(guān)于Vue3組件不發(fā)生變化如何監(jiān)聽pinia中數(shù)據(jù)變化的相關(guān)資料,pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
解決element-ui的el-dialog組件中調(diào)用ref無效的問題
這篇文章主要介紹了解決element-ui的el-dialog組件中調(diào)用ref無效的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要為大家詳細介紹了Vue封裝的組件全局注冊并引用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細介紹了Vue驗證用戶名是否可用的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)日歷備忘錄功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
Vue使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務(wù)、清除復(fù)制粘貼樣式等)
這篇文章主要介紹了Vue項目中使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務(wù)、清除復(fù)制粘貼樣式等)的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
vue-cli多頁面應(yīng)用實踐之實現(xiàn)組件預(yù)覽項目
在最近的項目中遇到了一個需求,找了相關(guān)資料后終于實現(xiàn),這篇文章主要給大家介紹了關(guān)于vue-cli多頁面應(yīng)用實踐之實現(xiàn)組件預(yù)覽項目的相關(guān)資料,需要的朋友可以參考下2022-05-05
今天在寫vue項目時碰到的問題是怎么修改vue的網(wǎng)頁圖標,所以下面這篇文章主要給大家介紹了關(guān)于vue項目中更改名字和圖標的簡單實現(xiàn),文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-08-08