-
ToPage1
-
ToPage2
-
ToPage3
+
+
+ ToPage1
+ ToPage2
+ ToPage3
+
+
+
+ {{ btn.text }}
+
diff --git a/src/pages/page-2.vue b/src/pages/page-2.vue
index f352e34..3dff727 100644
--- a/src/pages/page-2.vue
+++ b/src/pages/page-2.vue
@@ -27,5 +27,5 @@ function backToHome() {
onMounted(() => {
// console.log('router.currentRoute.value.from :>> ', router.currentRoute.value.from);
// backToHome()
-})
+});
diff --git a/src/pages/page-4.vue b/src/pages/page-4.vue
new file mode 100644
index 0000000..ca14be2
--- /dev/null
+++ b/src/pages/page-4.vue
@@ -0,0 +1 @@
+
page-4
diff --git a/src/router/guard/index.ts b/src/router/guard/index.ts
index 7e338b9..57860dc 100644
--- a/src/router/guard/index.ts
+++ b/src/router/guard/index.ts
@@ -1,26 +1,26 @@
-import NProgress from 'nprogress'
-import type { Router } from 'vue-router'
-import { createLogGuard, createStackGuard } from './log-guard'
+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)
+ createProgressGuard(router);
- createLogGuard(router)
+ createLogGuard(router);
- createStackGuard(router)
+ createStackGuard(router);
router.onError((error) => {
- console.debug('🚨 [router error]: ', error)
- })
+ console.debug('🚨 [router error]: ', error);
+ });
}
export function createProgressGuard(router: Router) {
router.beforeEach(() => {
- NProgress.start()
- })
+ NProgress.start();
+ });
router.afterEach(() => {
- NProgress.done()
- })
+ NProgress.done();
+ });
}
diff --git a/src/router/guard/log-guard.ts b/src/router/guard/log-guard.ts
index 315d89a..81513ba 100644
--- a/src/router/guard/log-guard.ts
+++ b/src/router/guard/log-guard.ts
@@ -1,147 +1,158 @@
-import { START_LOCATION } from 'vue-router'
-import type { RouteLocationNormalized, Router } from 'vue-router'
+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.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
- )
- })
+ 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
+ // const stack = router.stack = { /* list: [] as RouteLocationNormalized[], */ currentStackIndex: 0 }
+ let startPosition = -1;
+ let curPosition = -1;
- // if ($__DEV__) Object.assign(window, { stack })
+ // if ($__DEV__) Object.assign(window, { stack })
- const _routerHistory = router.options.history
+ const _routerHistory = router.options.history;
- /* window.addEventListener('beforeunload', function (event) {
- console.debug("🚥", '[onbeforeunload]', "event :>> ", event);
- const confirmationMessage = "\\o/";
+ /* 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.
- }) */
+ (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;
- });
+ _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)
- }
+ // #############################
+ // 重写 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 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)
- }
- })/* () */;
+ 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)
- }
+ // #############################
+ // 重写 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 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 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 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)
- }
- })/* () */;
+ 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.beforeEach(async (to) => {
+ if (to.name === 'Page3') {
+ return { name: 'Page2' }
+ }
+ }) */
- router.afterEach(async (to, from, failure) => {
- if (failure) return
+ router.afterEach(async (to, from, failure) => {
+ if (failure) return;
- if (from === START_LOCATION) {
- startPosition = history.state.position
- curPosition = startPosition - 1
- }
+ 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 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);
+ const delta = newPostion - curPosition;
+ const stackIdx = newPostion - startPosition;
+ if (newPostion > curPosition) {
+ console.log('👉🏻');
+ } else if (newPostion < curPosition) {
+ console.log('👈🏻');
+ // stack.splice(delta)
+ } else {
+ console.log('🔄');
+ }
+ Object.assign(to, { locationHref: window.location.href });
+ stack[stackIdx] = to as StackItem;
+ console.log('delta :>> ', delta);
- curPosition = newPostion;
-
- console.log(`%c${'-'.repeat(80)}`, 'color: #409EFF;')
- })
+ curPosition = newPostion;
+ console.log(
+ 'stack :>> ',
+ stack.map((item, index) => (stackIdx === index ? `🔵 ${item.name}` : item.name)),
+ stack,
+ );
+ console.log(`%c${'-'.repeat(80)}`, 'color: #409EFF;');
+ });
}
+
+declare type StackItem = RouteLocationNormalized & { locationHref: string };
+const stack: StackItem[] = [];
+Object.assign(window, { stack });
diff --git a/src/router/index.ts b/src/router/index.ts
index 1e7f7cc..5dbfc66 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,17 +1,17 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import { routes, handleHotUpdate } from 'vue-router/auto-routes'
-import { setupRouterGuard } from './guard'
+import { createRouter, createWebHistory } from 'vue-router';
+import { routes, handleHotUpdate } from 'vue-router/auto-routes';
+import { setupRouterGuard } from './guard';
export const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes,
strict: true
-})
+});
-if ($__DEV__) Object.assign(window, { router })
+if ($__DEV__) Object.assign(window, { router });
-setupRouterGuard(router)
+setupRouterGuard(router);
if (import.meta.hot) {
- handleHotUpdate(router)
+ handleHotUpdate(router);
}
diff --git a/src/stores/counter.ts b/src/stores/counter.ts
index b6757ba..e884e6d 100644
--- a/src/stores/counter.ts
+++ b/src/stores/counter.ts
@@ -1,12 +1,12 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
+import { ref, computed } from 'vue';
+import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', () => {
- const count = ref(0)
- const doubleCount = computed(() => count.value * 2)
+ const count = ref(0);
+ const doubleCount = computed(() => count.value * 2);
function increment() {
- count.value++
+ count.value++;
}
- return { count, doubleCount, increment }
-})
+ return { count, doubleCount, increment };
+});
diff --git a/src/types/router.ts b/src/types/router.ts
index f7daef8..f193e11 100644
--- a/src/types/router.ts
+++ b/src/types/router.ts
@@ -1,7 +1,7 @@
-import 'vue-router'
+import 'vue-router';
// 为了确保这个文件被当作一个模块，添加至少一个 `export` 声明
-export { }
+export {};
// declare module 'vue-router' {
// interface RouteMeta {
diff --git a/src/types/shims.d.ts b/src/types/shims.d.ts
index 30f043c..71754dc 100644
--- a/src/types/shims.d.ts
+++ b/src/types/shims.d.ts
@@ -1,7 +1,7 @@
-export {}
+export {};
declare global {
- const $__DEV__: boolean
+ const $__DEV__: boolean;
}
/* declare module 'vue' {
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 96308fc..9e796d2 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -22,5 +22,6 @@ declare module 'vue-router/auto-routes' {
'Page1': RouteRecordInfo<'Page1', '/page-1', Record
, Record>,
'Page2': RouteRecordInfo<'Page2', '/page-2', Record, Record>,
'Page3': RouteRecordInfo<'Page3', '/page-3', Record, Record>,
+ 'Page4': RouteRecordInfo<'Page4', '/page-4', Record, Record>,
}
}