【技术博客】动态面包屑导航

好久好久之前，在大森林的边上住着一个贫穷的樵夫，他与妻子和两个孩子相依为命。他的儿子名叫汉赛尔，女儿名叫格莱特。后来樵夫的妻子去世了，后母计划把两个孩子带到森林的深处，而后趁他们睡着的时候跑掉。汉赛尔无心中知道了后母的计划，因而偷偷地把一块面包藏在了口袋里。在去森林的路上，汉赛尔悄悄地捏碎了他的面包，并不时地停下脚步，把碎面包屑撒在路上。后母趁孩子们睡着的时候溜掉了，汉赛尔和格莱特醒来已经是一片漆黑。汉赛尔安慰他的妹妹说:"等太阳一出来，咱们就看得见我撒在地上的面包屑了，它必定会指给咱们回家的路。"

咱们为何须要面包屑？

"面包屑"在咱们的网站导航中，一样也是一种历史记录的方式，达到线性导航的目的。

在网页访问中，用户时常须要知道目前所处的页面位置，或者回到以前访问的网页中。这就须要面包屑导航(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/面包屑导航