feat: RouterStack

src/router/guard/index.ts

@@ -0,0 +1,26 @@
+import NProgress from 'nprogress'
+import type { Router } from 'vue-router'
+import { createLogGuard, createStackGuard } from './log-guard'
+
+// Don't change the order of creation
+export function setupRouterGuard(router: Router) {
+  createProgressGuard(router)
+
+  createLogGuard(router)
+
+  createStackGuard(router)
+
+  router.onError((error) => {
+    console.debug('🚨 [router error]: ', error)
+  })
+}
+
+export function createProgressGuard(router: Router) {
+  router.beforeEach(() => {
+    NProgress.start()
+  })
+
+  router.afterEach(() => {
+    NProgress.done()
+  })
+}

src/router/guard/log-guard.ts

@@ -0,0 +1,147 @@
+import { START_LOCATION } from 'vue-router'
+import type { RouteLocationNormalized, Router } from 'vue-router'
+
+export function createLogGuard(router: Router) {
+	router.beforeEach(async (to, from, next) => {
+		console.debug(
+			'🚗 ====================',
+			`[beforeEach]`,
+			`[${from === START_LOCATION ? 'START_LOCATION' : String(from.name || '')}]`,
+			`-> [${String(to.name)}].`,
+			'===================='
+		)
+		next()
+	})
+
+	router.afterEach(async (to, from, failure) => {
+		console.debug(
+			'🚗 ====================',
+			` [afterEach]`,
+			`[${from === START_LOCATION ? 'START_LOCATION' : String(from.name || '')}]`,
+			`-> [${String(to.name)}].`,
+			'==================== 🚗🚗🚗',
+			`failure: `,
+			failure
+		)
+	})
+}
+
+
+export function createStackGuard(router: Router) {
+	// const stack = router.stack = { /* list: [] as RouteLocationNormalized[], */ currentStackIndex: 0 }
+	let startPosition = -1
+	let curPosition = -1
+
+	// if ($__DEV__) Object.assign(window, { stack })
+
+	const _routerHistory = router.options.history
+
+	/* window.addEventListener('beforeunload', function (event) {
+		console.debug("🚥", '[onbeforeunload]', "event :>> ", event);
+		const confirmationMessage = "\\o/";
+
+		(event || window.event).returnValue = confirmationMessage; //Gecko + IE
+		return confirmationMessage; //Webkit, Safari, Chrome etc.
+	}) */
+
+	_routerHistory.listen((to, from, info) => {
+		console.debug('🚥 listen', ':')
+		console.debug('🚥 listen', 'from :>> ', from)
+		console.debug('🚥 listen', 'to :>> ', to) // TODO: 在afterEach那里核对
+		console.debug('🚥 listen', 'info :>> ', info)
+		// lastNavigationInfo.lastInfo = info;
+	});
+
+	// #############################
+	// 重写 router.history 方法
+	// #############################
+	(() => {
+		const routerHistoryPush = _routerHistory.push
+		_routerHistory.push = function (...args) {
+			console.debug('🚥 [router]', 'push: args :>> ', args)
+			return routerHistoryPush.call(this, ...args)
+		}
+
+		const routerHistoryReplace = _routerHistory.replace
+		_routerHistory.replace = function (...args) {
+			console.debug('🚥 [router]', 'replace: args :>> ', args)
+			// lastNavigationInfo.replace = true;
+			return routerHistoryReplace.call(this, ...args)
+		}
+
+		const routerHistoryGo = _routerHistory.go
+		_routerHistory.go = function (...args) {
+			console.debug('🚥 [router]', 'go: args :>> ', args)
+			return routerHistoryGo.call(this, ...args)
+		}
+	})/* () */;
+
+	// #############################
+	// 重写 window.history 方法
+	// #############################
+	(() => {
+		const browserHistoryBack = window.history.back
+		window.history.back = function (...args) {
+			console.debug('🌐 [Browser]', 'history.back: args :>> ', args)
+			return browserHistoryBack.call(this, ...args)
+		}
+
+		const browserHistoryForward = window.history.forward
+		window.history.forward = function (...args) {
+			console.debug('🌐 [Browser]', 'history.forward: args :>> ', args)
+			return browserHistoryForward.call(this, ...args)
+		}
+
+		const browserHistoryGo = window.history.go
+		window.history.go = function (...args) {
+			console.debug('🌐 [Browser]', 'history.go: args :>> ', args)
+			return browserHistoryGo.call(this, ...args)
+		}
+
+		const browserHistoryPushState = window.history.pushState
+		window.history.pushState = function (...args) {
+			console.debug('🌐 [Browser]', 'history.pushState: args :>> ', args)
+			return browserHistoryPushState.call(this, ...args)
+		}
+
+		const browserHistoryReplaceState = window.history.replaceState
+		window.history.replaceState = function (...args) {
+			console.debug('🌐 [Browser]', 'history.replaceState: args :>> ', args)
+			return browserHistoryReplaceState.call(this, ...args)
+		}
+	})/* () */;
+
+	router.beforeEach(async (to) => {
+		if (to.name === 'Page3') {
+			return { name: 'Page2' }
+		}
+	})
+
+	router.afterEach(async (to, from, failure) => {
+		if (failure) return
+
+		if (from === START_LOCATION) {
+			startPosition = history.state.position
+			curPosition = startPosition - 1
+		}
+
+		const newPostion = history.state.position
+		// console.log('history.state.position :>> ', history.state.position);
+		console.log('startPosition :>> ', startPosition);
+		console.log('newPostion :>> ', newPostion);
+
+		const delta = newPostion - curPosition
+		if (newPostion > curPosition) {
+			console.log('👉🏻');
+		} else if (newPostion < curPosition) {
+			console.log('👈🏻');
+		} else {
+			console.log('👌🏻');
+		}
+		console.log('delta :>> ', delta);
+
+		curPosition = newPostion;
+
+		console.log(`%c${'-'.repeat(80)}`, 'color: #409EFF;')
+	})
+}