fix: scroll to hash
This commit is contained in:
@@ -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" />
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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: [
|
||||||
|
|||||||
Reference in New Issue
Block a user