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)面包屑導航，供大家參考，具體內容如下
直接上代碼
一、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) {
// 調用獲取路由數(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;
}
以上就是面包屑的制作過程了。
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
更多vue學習教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue.js中Line第三方登錄api的實現(xiàn)代碼
這篇文章主要介紹了Vue.js中Line第三方登錄api實現(xiàn)代碼，本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
vue router使用query和params傳參的使用和區(qū)別
本篇文章主要介紹了vue router使用query和params傳參的使用和區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue3 component is 不顯示的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在Vue3.5版本中最大的改動就是響應式重構,重構后性能竟然炸裂的提升了56%,本文我們來講講使用雙向鏈表后,Vue內部是如何實現(xiàn)依賴收集和依賴觸發(fā)的,感興趣的可以了解下2024-11-11
el-form-item表單label添加提示圖標的實現(xiàn)
本文主要介紹了el-form-item表單label添加提示圖標的實現(xiàn),我們將了解El-Form-Item的基本概念和用法,及添加提示圖標以及如何自定義圖標樣式,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了阿望教你用vue寫掃雷小游戲，本文通過實例代碼效果圖展示的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
在Vue項目中使用Element UI的表格組件時,可以通過具體的單元格渲染方法添加超鏈接,在表格的某列中,利用模板或渲染函數(shù)插入<a>標簽,設置其href屬性指向目標URL,實現(xiàn)點擊跳轉功能,此方法適用于需要從表格信息中快速導航到相關詳細頁面的場景2024-09-09
這篇文章主要介紹了vue3如何使用pinia替代vuex問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了keep-alive保持組件狀態(tài)的方法，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-12-12
Vue.js 是一個流行的前端框架,它提供了多種方法來實現(xiàn)數(shù)據(jù)的雙向綁定和事件處理,在構建表單時,我們經常需要實現(xiàn)清空輸入框的功能,本文將介紹兩種在Vue中實現(xiàn)輸入框清空功能的方法,感興趣的小伙伴跟著小編一起來看看吧2024-12-12