vue 面包屑導航組件封裝
更新時間：2022年07月26日 09:08:23 作者：小解不懈
本文主要介紹了vue 面包屑導航組件封裝，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
面包屑導航可以將瀏覽過的頁面記錄下來，方便很快速的跳轉回某一個頁面，本文介紹了幾種自己封裝面包屑組件的方式。
一、為什么需要面包屑？
當網頁進行了多次跳轉后，用戶可能早就已經暈頭轉向了。作為程序猿的我們可能通過地址欄參數還可以分清楚當前處于哪一個位置，終歸網頁是要展示給用戶。用戶來使用的話，沒有面包屑導航的話，可能就對網頁產生了抵觸心理，使用面包屑導航將每次跳轉的頁面記錄下來，可以很好解決這一問題。
二、初級封裝
1. 實現思路
- 準備頁面結構和樣式,需要用到字體圖標 在
public目錄下的index.html中引入cdn的字體圖標資源
<link rel="stylesheet" rel="external nofollow" >
- 將需要外部傳入的值定義為自定義屬性
- 將外部寫在標簽內部的內容放置在默認插槽中
2. 代碼演示
在src/components目錄下新建bread-crumbs.vue文件，公用的組件放在這個目錄下統一管理，文件名可自定義。
代碼如下（示例）：
<template>
<div class='bread-crumbs'>
<div class="bread-crumbs-item">
<RouterLink to="/">首頁</RouterLink>
</div>
<i class="iconfont icon-angle-right"></i>
<div v-if="parentName" class="bread-crumbs-item">
<RouterLink v-if="parentPath" :to="parentPath">{{parentName}}</RouterLink>
<span v-else>{{parentName}}</span>
</div>
<i v-if="parentName" class="iconfont icon-angle-right"></i>
<div class="bread-crumbs-item">
<span>
<slot/>
</span>
</div>
</div>
</template>
<script>
export default {
name: 'BreadCrumbs',
props: {
parentName: {
type: String,
default: ''
},
parentPath: {
type: String,
default: ''
}
}
}
</script>
<style scoped lang='less'>
.bread-crumbs{
display: flex;
padding: 25px 10px;
&-item {
a {
text-decoration: none;
color: #666;
transition: all .4s;
&:hover {
color: #27ba9b;
}
}
}
i {
font-size: 12px;
font-style: normal;
margin-left: 5px;
margin-right: 5px;
line-height: 22px;
}
}
</style>
在src/components目錄下新建index.js文件，將封裝好的全局組件進行注冊
import BreadCrumbs from './bread-crumbs'
export default {
install (app) {
app.component(BreadCrumbs.name, BreadCrumbs)
}
}在main.js中注冊為插件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 導入并注冊
import myUI from './components'
createApp(App).use(store).use(router).use(myUI).mount('#app')3. 使用
傳入公共組件需要的值 代碼如下（示例）：
<template>
<div class="home-banner">
<bread-crumbs parentPath="/xxx" parentName="電器">空調</bread-crumbs>
</div>
</template>
<script>
export default {
name: 'App',
setup() {
}
}
</script>4. 不足
只能滿足基本需求，超過二級導航后就無法使用。
三、進階封裝
1. 實現思路
- 參考
elementUI面包屑組件代碼
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item><a href="/" rel="external nofollow" >活動管理</a></el-breadcrumb-item>
<el-breadcrumb-item>活動列表</el-breadcrumb-item>
<el-breadcrumb-item>活動詳情</el-breadcrumb-item>
</el-breadcrumb>- 將每一個導航封裝為一個組件
2. 代碼演示
在上一步封裝的基礎上繼續(xù)改進代碼
代碼如下（示例）： 在src/component目錄下新建bread-crumbs-item組件，文件名可以自定義。
<template>
<div class="bread-crumbs-item">
<RouterLink v-if="to" :to="to"><slot /></RouterLink>
<span v-else><slot /></span>
<i class="iconfont icon-angle-right"></i>
</div>
</template>
<script>
export default {
name: 'BreadCurmbsItem',
props: {
to: {
type: [String, Object]
}
}
}
</script>還是在src/components目錄下的index.js中注冊為全局組件
import BreadCrumbs from './bread-crumbs'
import BreadCrumbsItem from './bread-crumbs-item'
export default {
install (app) {
app.component(BreadCrumbs.name, BreadCrumbs)
app.component(BreadCrumbsItem .name, BreadCrumbsItem )
}
}修改BreadCrumbs.vue中代碼，將導航的每一項放置在默認插槽中
<template>
<div class='bread-crumbs'>
<slot />
</div>
</template>
<script>
export default {
name: 'BreadCrumbs'
}
</script>
<style scoped lang='less'>
.bread-crumbs {
display: flex;
padding: 25px 10px;
:deep(&-item) {
a {
text-decoration: none;
color: #666;
transition: all 0.4s;
&:hover {
color: #27ba9b;
}
}
}
:deep(i) {
font-style: normal;
font-size: 12px;
margin-left: 5px;
margin-right: 5px;
line-height: 22px;
}
}
</style>
3. 使用
使用的時候，有多少個二級導航就使用幾個BreadCrumbsItem 代碼如下（示例）：
<template>
<div class="home-banner">
<!-- 面包屑 -->
<BreadCrumbs>
<BreadCrumbsItem to="/">首頁</BreadCrumbsItem>
<BreadCrumbsItem to="/xxx">電器</BreadCrumbsItem>
<BreadCrumbsItem >空調</BreadCrumbsItem>
</BreadCrumbs>
</div>
</template>
<script>
export default {
name: 'App',
setup() {
}
}
</script>4. 不足
在最后一個導航后面會有多余的一個>指示標識
四、高階封裝
1. 思路
終極版，使用render函數自己進行拼接創(chuàng)建。 createElement render
render選項與h函數指定組件顯示的內容：
new Vue({選項})- el 選項，通過一個選擇器找到容器，容器內容就是組件內容
- template 選項，
<div>組件內容</div>作為組件內容 - render選項，它是一個函數，函數回默認傳人createElement的函數（h），這個函數用來創(chuàng)建結構，再render函數返回渲染為組件內容。它的優(yōu)先級更高。
2. 代碼演示
修改BreadCurmbsItem組件內的代碼
<template>
<div class="bread-crumbs-item">
<RouterLink v-if="to" :to="to"><slot /></RouterLink>
<span v-else><slot /></span>
</div>
</template>
<script>
export default {
name: 'BreadCurmbsItem',
props: {
to: {
type: [String, Object]
}
}
}
</script>修改BreadCrumbs.vue中的代碼
代碼示例(如下)：
<script>
import { h } from 'vue'
export default {
name: 'BreadCrumbs',
render () {
// 用法
// 1. template 標簽去除，單文件組件
// 2. 返回值就是組件內容
// 3. vue2.0 的h函數傳參進來的，vue3.0 的h函數導入進來
// 4. h 第一個參數 標簽名字 第二個參數 標簽屬性對象 第三個參數 子節(jié)點
// 需求
// 1. 創(chuàng)建bread-crumbs父容器
// 2. 獲取默認插槽內容
// 3. 去除bread-crumbs-item組件的i標簽，因該由render函數來組織
// 4. 遍歷插槽中的item，得到一個動態(tài)創(chuàng)建的節(jié)點，最后一個item不加i標簽
// 5. 把動態(tài)創(chuàng)建的節(jié)點渲染再bread-crumbs標簽中
const items = this.$slots.default()
const dymanicItems = []
items.forEach((item, i) => {
dymanicItems.push(item)
if (i < (items.length - 1)) {
dymanicItems.push(h('i', { class: 'iconfont icon-angle-right' }))
}
})
return h('div', { class: 'bread-crumbs' }, dymanicItems)
}
}
</script>
<style lang='less'>
// 將scope屬性去除，目的是為了樣式穿透至item組件中
.bread-crumbs {
display: flex;
padding: 25px 10px;
&-item {
a {
text-decoration: none;
color: #666;
transition: all .4s;
&:hover {
color: #27ba9b;
}
}
}
i {
font-size: 12px;
margin-left: 5px;
margin-right: 5px;
line-height: 22px;
// 樣式的方式，不合理
// &:last-child {
// display: none;
// }
}
}
</style>3. 使用
這個方式封裝后，讓全局組件的復用性更強了，強烈推薦使用
<template>
<div class="home-banner">
<!-- 面包屑 -->
<BreadCrumbs>
<BreadCrumbsItem to="/">首頁</BreadCrumbsItem>
<BreadCrumbsItem to="/xxx">電器</BreadCrumbsItem>
<BreadCrumbsItem to="/xxx/xx">空調</BreadCrumbsItem>
<BreadCrumbsItem >遙控器</BreadCrumbsItem>
</BreadCrumbs>
</div>
</template>
<script>
export default {
name: 'App',
setup() {
}
}
</script>
可以看到這樣封裝后，咱們自己封裝的面包屑導航已經支持多級導航了。而且最后一個導航后面的>指示標識也沒有了。
到此這篇關于vue 面包屑導航組件封裝的文章就介紹到這了,更多相關vue 面包屑導航內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Ant?Design?Vue?修改表格頭部樣式,首先用到的是customHeaderRow這個API，類型是一個函數，本文通過完整代碼給大家詳細講解，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue.js計算屬性computed用法,結合實例形式分析了vue.js使用computed方式進行屬性計算的相關操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue項目實現多語言切換的思路，幫助大家完成多語言翻譯，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了vue單向數據綁定和雙向數據綁定方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue snippets插件原理與使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10
這篇文章主要介紹了vue子頁面控制父頁面刷新問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
最近在學習vue router的傳參,所以下面這篇文章主要給大家介紹了關于vuejs路由的傳參及路由props配置的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
本文主要介紹了Vue.js結合SortableJS實現樹形數據拖拽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要介紹了vue中的proxyTable反向代理(親測有用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
我們在開發(fā)的時候會經常用的導出excel表格功能,剛好自己開發(fā)有遇到,就記錄一下,下面這篇文章主要給大家介紹了關于Vue前端表格導出Excel文件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04