vue element-ui動(dòng)態(tài)面包屑導(dǎo)航，供大家參考，具體內(nèi)容如下

十年的吉水網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整吉水建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“吉水網(wǎng)站設(shè)計(jì)”,“吉水網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

直接上代碼

一、template代碼

// 這是單獨(dú)的組件
<template>
 <el-breadcrumb separator-class="el-icon-arrow-right">
 // 首頁我是寫死的，其他的遍歷出來
 <el-breadcrumb-item :to="{ name: 'home' }">首頁</el-breadcrumb-item>
 // 因?yàn)槁酚墒呛笈_(tái)返回的，所以取title是按照后臺(tái)格式來取的
 <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ù)對(duì)象
 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對(duì)象
  if (val.matched) {
  let matched = val.matched.filter(item => item.meta && item.meta.title);
  // 拿到過濾好的路由v-for遍歷出來
  this.breadList = matched;
  }
 }
 }
}

三、css代碼

css樣式是放在一個(gè)單獨(dú)的樣式文件夾里面

/* 面包屑導(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組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

更多vue學(xué)習(xí)教程請(qǐng)閱讀專題《vue實(shí)戰(zhàn)教程》

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文名稱：vueelement-ui實(shí)現(xiàn)動(dòng)態(tài)面包屑導(dǎo)航
文章URL：http://www.chinadenli.net/article12/jcoddc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站維護(hù)、關(guān)鍵詞優(yōu)化、微信小程序、靜態(tài)網(wǎng)站、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)