add a HeaderContentBottom layout

- rewrite album page to use the above layout
This commit is contained in:
geoffrey45
2022-07-07 11:55:13 +03:00
parent 1bfa43350c
commit 7a953d366e
8 changed files with 244 additions and 184 deletions
+30
View File
@@ -0,0 +1,30 @@
<template>
<Page>
<template #header>
<Header :album="album.info" />
</template>
<template #content>
<Content :tracks="album.tracks" />
</template>
<template #bottom>
<Bottom :artists="album.artists" :bio="album.bio" />
</template>
</Page>
</template>
<script setup lang="ts">
import { onBeforeRouteUpdate, RouteLocationNormalized } from "vue-router";
import useAStore from "@/stores/pages/album";
import Page from "../layouts/HeaderContentBottom.vue";
import Header from "./Header.vue";
import Content from "./Content.vue";
import Bottom from "./Bottom.vue";
const album = useAStore();
onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
await album.fetchTracksAndArtists(to.params.hash.toString());
album.fetchBio(to.params.hash.toString());
});
</script>