fix: scroll to hash

This commit is contained in:
skytek_xinliang
2026-09-23 17:51:35 +08:00
parent 92c5163334
commit 0727a803c0
5 changed files with 28 additions and 5 deletions
@@ -1,5 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
withDefaults( import { useRouter } from "vue-router";
const props = withDefaults(
defineProps<{ defineProps<{
title: string; title: string;
backTo?: string; backTo?: string;
@@ -8,6 +10,17 @@ withDefaults(
backTo: "/", backTo: "/",
}, },
); );
const router = useRouter();
function handleBack() {
if (window.history.state?.back === props.backTo) {
router.back();
return;
}
router.push(props.backTo);
}
</script> </script>
<template> <template>
@@ -18,8 +31,8 @@ withDefaults(
color="primary" color="primary"
prepend-icon="mdi-arrow-left" prepend-icon="mdi-arrow-left"
rounded="pill" rounded="pill"
:to="backTo"
variant="outlined" variant="outlined"
@click="handleBack"
> >
返回 返回
</v-btn> </v-btn>
@@ -48,7 +48,7 @@ onMounted(loadBodyComposition);
<Layout> <Layout>
<template #main> <template #main>
<div class="max-width-mobile pb-2"> <div class="max-width-mobile pb-2">
<PageHeading title="身體數值分析" /> <PageHeading back-to="/#body-composition-entry" title="身體數值分析" />
<template v-if="loading"> <template v-if="loading">
<v-skeleton-loader class="rounded-xl mb-4" type="article, table" /> <v-skeleton-loader class="rounded-xl mb-4" type="article, table" />
+1 -1
View File
@@ -2,7 +2,7 @@
<Layout> <Layout>
<template #main> <template #main>
<template v-if="store.groupLoaded"> <template v-if="store.groupLoaded">
<PageHeading title="課程建議" /> <PageHeading back-to="/#course-entry" title="課程建議" />
<!-- 體適能組別:本頁所有內容都依它而定,因此獨立成一張顯眼的卡片 --> <!-- 體適能組別:本頁所有內容都依它而定,因此獨立成一張顯眼的卡片 -->
<v-card <v-card
+2
View File
@@ -88,6 +88,7 @@
/> />
<v-list-item <v-list-item
id="course-entry"
append-icon="mdi-chevron-right" append-icon="mdi-chevron-right"
class="bg-primary py-4" class="bg-primary py-4"
to="/course" to="/course"
@@ -127,6 +128,7 @@
<HealthRadarChart v-else :radar-data="physicalFitnessRadarData" /> <HealthRadarChart v-else :radar-data="physicalFitnessRadarData" />
</v-card> </v-card>
<ModuleRouterCard <ModuleRouterCard
id="body-composition-entry"
v-if="BODY_COMPOSITION_ENABLED" v-if="BODY_COMPOSITION_ENABLED"
description="查看 BMI 與體脂率的分析結果。" description="查看 BMI 與體脂率的分析結果。"
icon="mdi-scale-bathroom" icon="mdi-scale-bathroom"
+9 -1
View File
@@ -20,7 +20,15 @@ import { getApiErrorStatus } from "@/utils/api-error";
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
scrollBehavior() { scrollBehavior(to, _from, savedPosition) {
if (savedPosition) {
return savedPosition;
}
if (to.hash) {
return { el: to.hash, top: 68 };
}
return { left: 0, top: 0 }; return { left: 0, top: 0 };
}, },
routes: [ routes: [