🚸 优化路由参数处理，完善角色和武器页面的跳转逻辑

src/pages/WIKI/Character.vue

@@ -31,8 +31,8 @@ import TwcCharacter from "@comp/pageWiki/twc-character.vue";
 import TwcListItem from "@comp/pageWiki/twc-list-item.vue";
 import TwoSelectC, { type SelectedCValue } from "@comp/pageWiki/two-select-c.vue";
 import { toObcPage } from "@utils/TGWindow.js";
-import { onBeforeMount, ref, shallowRef, watch } from "vue";
-import { useRoute } from "vue-router";
+import { ref, shallowRef, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
 import { AppCharacterData } from "@/data/index.js";
 
@@ -44,7 +44,8 @@ const appCData = AppCharacterData.sort(
     b.id - a.id,
 );
 
-const id = (useRoute().params?.id ?? 0).toString();
+const route = useRoute();
+const router = useRouter();
 const showSelect = ref<boolean>(false);
 const resetSelect = ref<boolean>(false);
 const cardsInfo = shallowRef<Array<TGApp.App.Character.WikiBriefInfo>>(appCData);
@@ -63,7 +64,7 @@ const curItem = shallowRef<TGApp.App.Character.WikiBriefInfo>({
   nameCard: "",
 });
 
-onBeforeMount(() => {
+function loadCurItem(id: string): void {
   if (id === "0") {
     curItem.value = cardsInfo.value[0];
     return;
@@ -75,7 +76,13 @@ onBeforeMount(() => {
   }
   showSnackbar.warn(`角色 ${id} 不存在`);
   curItem.value = cardsInfo.value[0];
-});
+}
+
+watch(
+  () => route.params.id,
+  (newId) => loadCurItem((newId ?? 0).toString()),
+  { immediate: true },
+);
 
 watch(
   () => resetSelect.value,
@@ -112,6 +119,7 @@ async function switchC(item: TGApp.App.Character.WikiBriefInfo): Promise<void> {
     return;
   }
   curItem.value = item;
+  await router.replace({ params: { id: item.id.toString() } });
 }
 
 async function toOuter(item?: TGApp.App.Character.WikiBriefInfo): Promise<void> {

src/pages/WIKI/Weapon.vue

@@ -30,8 +30,8 @@ import TwcListItem from "@comp/pageWiki/twc-list-item.vue";
 import TwcWeapon from "@comp/pageWiki/twc-weapon.vue";
 import TwoSelectW, { type SelectedWValue } from "@comp/pageWiki/two-select-w.vue";
 import { toObcPage } from "@utils/TGWindow.js";
-import { onBeforeMount, ref, shallowRef, watch } from "vue";
-import { useRoute } from "vue-router";
+import { ref, shallowRef, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
 import { AppWeaponData } from "@/data/index.js";
 
@@ -41,7 +41,8 @@ const appWData = AppWeaponData.sort((a, b) => {
   return b.id - a.id;
 });
 
-const id = (useRoute().params?.id ?? 0).toString();
+const route = useRoute();
+const router = useRouter();
 const showSelect = ref<boolean>(false);
 const resetSelect = ref<boolean>(false);
 const cardsInfo = shallowRef<Array<TGApp.App.Weapon.WikiBriefInfo>>(appWData);
@@ -53,7 +54,7 @@ const curItem = shallowRef<TGApp.App.Weapon.WikiBriefInfo>({
   weapon: "",
 });
 
-onBeforeMount(() => {
+function loadCurItem(id: string): void {
   if (id === "0") {
     curItem.value = cardsInfo.value[0];
     return;
@@ -65,7 +66,13 @@ onBeforeMount(() => {
   }
   showSnackbar.warn(`武器 ${id} 不存在`);
   curItem.value = cardsInfo.value[0];
-});
+}
+
+watch(
+  () => route.params.id,
+  (newId) => loadCurItem((newId ?? 0).toString()),
+  { immediate: true },
+);
 
 watch(
   () => resetSelect.value,
@@ -78,6 +85,7 @@ watch(
 
 function switchW(item: TGApp.App.Weapon.WikiBriefInfo): void {
   curItem.value = item;
+  router.replace({ params: { id: item.id.toString() } });
 }
 
 function handleSelectW(val: SelectedWValue) {

src/router/index.ts

@@ -1,6 +1,6 @@
 /**
  * 路由入口
- * @since Beta v0.9.1
+ * @since Beta v0.10.2
  */
 
 import { createRouter, createWebHistory } from "vue-router";
@@ -9,7 +9,7 @@ import routes from "./routes.js";
 
 const router = createRouter({ history: createWebHistory(), routes: routes });
 // 只有在特定页面忽略参数变化
-const ignoreRoutes: ReadonlyArray<string> = ["酒馆", "话题", "实用脚本"];
+const ignoreRoutes: ReadonlyArray<string> = ["酒馆", "话题", "实用脚本", "角色图鉴", "武器图鉴"];
 
 // TODO:路由重构 解决路由重复问题
 router.afterEach((to, from) => {