【技術博客】動態麪包屑導航

好久好久之前，在大森林的邊上住着一個貧窮的樵夫，他與妻子和兩個孩子相依爲命。他的兒子名叫漢賽爾，女兒名叫格萊特。後來樵夫的妻子去世了，後母計劃把兩個孩子帶到森林的深處，而後趁他們睡着的時候跑掉。漢賽爾無心中知道了後母的計劃，因而偷偷地把一塊麪包藏在了口袋裏。在去森林的路上，漢賽爾悄悄地捏碎了他的麪包，並不時地停下腳步，把碎麪包屑撒在路上。後母趁孩子們睡着的時候溜掉了，漢賽爾和格萊特醒來已經是一片漆黑。漢賽爾安慰他的妹妹說:"等太陽一出來，咱們就看得見我撒在地上的麪包屑了，它必定會指給咱們回家的路。"

咱們爲何須要麪包屑？

"麪包屑"在咱們的網站導航中，一樣也是一種歷史記錄的方式，達到線性導航的目的。

在網頁訪問中，用戶時常須要知道目前所處的頁面位置，或者回到以前訪問的網頁中。這就須要麪包屑導航(Bread crumbs)。

麪包屑導航的主要做用以下：

1. 代表當前所處的位置，方面用戶感知頁面之間的所屬關係；

2. 提供返回到以前各個層級的入口，做爲主導航的補充；

3. 幫助用戶快速掌握網站的架構方式。

靜態麪包屑

在Alpha版中，咱們實現了靜態麪包屑，即對於每一個頁面，有固定的麪包屑導航欄，標識該頁面的父親頁面。靜態麪包屑的導航邏輯時由咱們在編碼的過程當中提早決定的。

實現方法

因爲靜態麪包屑是咱們能夠提早決定的，所以實現比較簡單，咱們只須要標識好每一個頁面有哪些父親頁面便可。

咱們使用router中的數據結構記錄下其父親界面的名字和path。例如，對於[路書編輯頁]這個界面，其router以下:

{
	path: '/editor',
	name: 'Editor',
	component: () => import('../views/RoadmapEditorView.vue'),
	meta: {
		name: ['路書目錄', '路書編輯頁'],
		path: ['/RoadmapTable', '/editor'],
	},
}

在界面上，咱們將每一個頁面的父親頁面輸出爲麪包屑便可:

<Breadcrumb :style="{margin: '16px 0px'}">
<BreadcrumbItem
	:to="$route.meta.path[index]"
	v-for="(item, index) in $route.meta.name"
	:key="index">
	{{ item }}
</BreadcrumbItem>
</Breadcrumb>

爲何須要動態麪包屑？

靜態麪包屑能夠在不少狀況下知足咱們的需求，可是頁面的組織形式可能不是簡單的樹狀結構，一個頁面可能有多個父親頁面(如在本網站中，article markdown editor頁面的父親界面可能爲文獻管理，也能夠是路書界面)。所以，咱們須要記錄下用戶的歷史訪問操做，創建一個動態的麪包屑，爲不一樣用戶訪問路徑創建不一樣的麪包屑。這點是靜態麪包屑導航沒法實現的。

如何實現動態麪包屑？

動態麪包屑須要維護用戶訪問的界面。咱們經過一個全局的[用戶訪問棧]來實現，用戶在到達每一個界面時，咱們將其訪問的頁面入棧。

爲了保持麪包屑的頁面順序，咱們爲每一個頁面設置一個level屬性，在A頁面入棧的過程當中，將level大於等於該A頁面的其餘頁面出棧。

具體實現以下：

router出咱們增長[level]和[nickName]兩個屬性，例如:

{
	path: '/articleTable',
	name: 'ArticleTable',
	component: () => import('../views/ArticleTableView.vue'),
	meta: {
		nickName: '文獻目錄',
		level: 2,
	},
}

咱們創建了一個全局[用戶訪問棧]，在到達每一個頁面時，將該頁面"入棧":

export default function pushRouter(name, nickName, fullPath, level) {
	let hasHomePage = false;
	for (let i = 0; i < window.routerStack.length; i += 1) {
		if (window.routerStack[i].nickName === '主頁') {
			hasHomePage = true;
		} else if ((window.routerStack[i].level >= level || window.routerStack[i].name === undefined)) {
			window.routerStack.splice(i, 1);
			i -= 1;
		}
	}
	if (!hasHomePage) {
		window.routerStack.push({ name: 'Welcome', nickName: '主頁', fullPath: '/', level: 1 });
	}
	if (level > 1) {
		window.routerStack.push({ name, nickName, fullPath, level });
	}
}

動態麪包屑的效果

使用咱們的方法能夠實現動態麪包屑的既定效果。

1. 從路書編輯頁進入文獻筆記

2. 從文獻目錄進入文獻筆記

參考

http://www.woshipm.com/ucd/107620.html

https://baike.baidu.com/item/麪包屑導航