vue记录路由历史+el-scrollbar，实现路由历史标签化

概述：通过beforeEach拦截。vuex+sessionStorage实现持久化（路由历史应该随浏览器关闭而清空）。el-scrollbar elementUi 的隐藏组件实现滚动条。

tag点击事件，调用方法计算scrollbr宽度，计算tag宽度，计算tag距离left（左边）多少px。tag宽度+距离右边再加20px左右，如果大于scrollbr宽度，证明tag所在位置已经到了最右边，实现点击tag之后scrollbr跟随滚动。

初始化数据渲染完成之后，通过当前路由获取下标，实现初始化计算。

1、利用路由守位前卫beforeEach拦截，每次路由记录到缓存。

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'

// 导航首位拦截，判断是否登录，及访问权限
router.beforeEach((to, from, next) => {
	setRouterHistory(to)	
})

// 记录路由历史
const setRouterHistory = (to) => {
	let obj = {
		title: to.meta.title,
		path: to.path,
	}
	let routerHistory = store.state.app.routerHistory;
	routerHistory.push(obj);
    //map去重，避免重复记录重复路由
	let mapArr = () => {
		let map = new Map();
		for (let item of routerHistory) {
			if (!map.has(item.path)) {
				map.set(item.path, item);
			}
		}
		return [...map.values()];
	}
	let newArr = mapArr();
	store.commit('setRouterHistory', newArr)
}

2、vuex+sessionStorage实现持久化 app.js

import storage from '../storage.js'
const session = "sessionStorage"
export default {
	state: {
		routerHistory: storage.getValue('routerHistory') || [],
		nowRouter: storage.getValue('nowRouter'),
	},
	getters: {
        routerHistory: state => state.app.routerHistory,
    },
	mutations: {
		// 设置路由历史
		setRouterHistory(state, routerHistory) {
			state.routerHistory = routerHistory;
			storage.setValue('routerHistory', routerHistory);
		},
		// 清除路由历史
		cleanRouterHistory(state) {
			state.routerHistory = [];
			storage.cleanValue('routerHistory');
		},
		// 设置当前路由
		setNowRouter(state, nowRouter) {
			state.nowRouter = nowRouter;
			storage.setValue('nowRouter', nowRouter);
		},
		// 清除当前路由
		cleanNowRouter(state) {
			state.nowRouter = undefined;
			storage.cleanValue('nowRouter');
		},
	},
	actions: {},
}

3、本地储存文件，路由历史应该关闭浏览器就清除，所以应该使用sessionStorage

export default {
	setValue(key, value, type) {
		if (typeof value == "object") {
			// 如果是对象，就转字符串存储
			value = JSON.stringify(value)
		}
		return window[type || 'localStorage'].setItem(key, value);
	},
	getValue(key, type) {
		const data = window[type || 'localStorage'].getItem(key);
		if (data) {
			let value = data;
			if ((data.indexOf('{') === 0 || data.indexOf('[') === 0) && data.indexOf(':') >= 0) {
				// 如果是字符串对象，就转对象
				value = JSON.parse(data)
			}
			return value
		} else {
			return false
		}
	},
	cleanValue(key, type) {
		window[type || 'localStorage'].removeItem(key);
	}
}

4、把scrollbar和tag封装成组件，通过点击tag，获取tag位置，并计算scrollbar和tag宽度，实现根据tag位置，scrollbar跟随滚动

5、home引用后，实现效果展示