Vue Element是一個(gè)基于Vue.js 2.0的桌面端組件庫(kù)，提供了許多常用的UI組件，用戶(hù)可以使用這些UI組件來(lái)快速構(gòu)建出具有良好用戶(hù)體驗(yàn)的WEB應(yīng)用。其中，導(dǎo)航組件是Vue Element中十分常用且有用的一部分。

導(dǎo)航組件包括了日期選擇器、下拉菜單、標(biāo)簽頁(yè)、面包屑導(dǎo)航等多種類(lèi)型。這些組件各有不同的特點(diǎn)和用途，可以為用戶(hù)提供良好的導(dǎo)航體驗(yàn)。下面簡(jiǎn)單介紹一下日期選擇器和面包屑導(dǎo)航。

<el-date-picker v-model="value" type="date" placeholder="選擇日期"></el-date-picker>

日期選擇器可以用來(lái)選擇時(shí)間范圍，輸入時(shí)間的UI組件，十分方便。代碼中的el-date-picker組件設(shè)置了v-model屬性，用來(lái)雙向綁定選擇的時(shí)間值，type屬性設(shè)置為date，表示選擇的是一個(gè)日期，placeholder屬性設(shè)置為“選擇日期”，是選擇器下方默認(rèn)的提示語(yǔ)。

<el-breadcrumb separator="/" style="margin-bottom:10px;">
<el-breadcrumb-item :to="{ path: '/' }">首頁(yè)</el-breadcrumb-item>
<el-breadcrumb-item>活動(dòng)管理</el-breadcrumb-item>
<el-breadcrumb-item>活動(dòng)列表</el-breadcrumb-item>
<el-breadcrumb-item>活動(dòng)詳情</el-breadcrumb-item>
</el-breadcrumb>

面包屑導(dǎo)航是用來(lái)顯示當(dāng)前頁(yè)面在網(wǎng)站中所在的位置的，能夠提供用戶(hù)好的導(dǎo)航體驗(yàn)。代碼中的el-breadcrumb組件設(shè)置了separator屬性為“/”，表示分隔符為/。在el-breadcrumb-item標(biāo)簽中設(shè)置了點(diǎn)擊跳轉(zhuǎn)的路由（通過(guò)to屬性），并分別設(shè)置了4個(gè)網(wǎng)頁(yè)的名稱(chēng)作為面包屑導(dǎo)航的內(nèi)容。