chore: StackGuard

src/pages/index-page.vue

@@ -1,13 +1,73 @@
-<script setup lang="ts">
+<script lang="ts" setup>
+import { router } from '@/router';
+
 definePage({
   alias: '/'
-})
+});
+
+const testButtons = [
+  {
+    text: 'Page1 -> Page2',
+    onClick: async () => {
+      console.clear();
+      console.debug('⚙️ 预期结果：', ['Page1', 'Page2']);
+      await router.push({ name: 'Page1' });
+      await router.push({ name: 'Page2' });
+    }
+  },
+  {
+    text: 'A -> (B) -> C',
+    onClick: async () => {
+      console.clear();
+      console.debug('⚙️ 预期结果： ', ['Page1', 'Page3']);
+      await router.push({ name: 'Page1' });
+      await router.push({ name: 'Page2' });
+      await router.push({ name: 'Page3', replace: true });
+    }
+  },
+  {
+    text: 'A -> B -> C -> go(-2)',
+    onClick: async () => {
+      console.clear();
+      console.debug('⚙️ 预期结果： ', ['/', '/Page1📍', '/Page2', '/Page3']);
+      await router.push({ name: 'Page1' });
+      await router.push({ name: 'Page2' });
+      await router.push({ name: 'Page3' });
+      router.go(-2);
+    }
+  },
+  {
+    text: 'A -> B -> C -> go(-1) -> (D)',
+    onClick: async () => {
+      console.clear();
+      console.debug('⚙️ 预期结果： ', ['/', 'Page1', 'Page4📍', 'Page3']);
+      await router.push({ name: 'Page1' });
+      await router.push({ name: 'Page2' });
+      await router.push({ name: 'Page3' });
+      router.go(-1);
+
+      function popStateListener() {
+        console.debug('back执行完成, 替换"Page2"为"Page4"');
+        router.replace({ name: 'Page4' });
+        window.removeEventListener('popstate', popStateListener);
+      }
+
+      window.addEventListener('popstate', popStateListener);
+    }
+  }
+];
 </script>
 
 <template>
-  <div class="flex gap-2">
-    <t-button @click="$router.push({ name: 'Page1' })">ToPage1</t-button>
-    <t-button @click="$router.push({ name: 'Page2' })">ToPage2</t-button>
-    <t-button @click="$router.push({ name: 'Page3' })">ToPage3</t-button>
+  <div class="flex flex-col gap-2 items-start">
+    <div class="flex gap-2">
+      <t-button @click="$router.push({ name: 'Page1' })">ToPage1</t-button>
+      <t-button @click="$router.push({ name: 'Page2' })">ToPage2</t-button>
+      <t-button @click="$router.push({ name: 'Page3' })">ToPage3</t-button>
+    </div>
+
+    <template v-for="btn in testButtons" :key="btn.text">
+      <t-button theme="primary" @click="btn.onClick">{{ btn.text }}</t-button>
+    </template>
   </div>
 </template>

src/pages/page-2.vue

@@ -27,5 +27,5 @@ function backToHome() {
 onMounted(() => {
   // console.log('router.currentRoute.value.from :>> ', router.currentRoute.value.from);
   // backToHome()
-})
+});
 </script>

src/pages/page-4.vue

@@ -0,0 +1 @@
+<template>page-4</template>