[web] Use named route for the browse page

Switching to named routes in order to reduce future maintenance.
This commit is contained in:
Alain Nussbaumer 2023-07-12 17:47:16 +02:00
parent 19c315a43a
commit 2bec9e1886
3 changed files with 21 additions and 27 deletions

View File

@ -7,7 +7,7 @@
<ul>
<router-link
v-slot="{ navigate, isActive }"
to="/music/browse"
:to="{ name: 'music-browse' }"
custom
>
<li :class="{ 'is-active': isActive }">

View File

@ -13,10 +13,10 @@
<template #footer>
<nav class="level">
<p class="level-item">
<a
class="button is-light is-small is-rounded"
@click="open_browse('recently_added')"
<router-link
v-text="$t('page.browse.show-more')"
class="button is-light is-small is-rounded"
:to="{ name: 'music-browse-recently-added' }"
/>
</p>
</nav>
@ -37,10 +37,10 @@
<template #footer>
<nav class="level">
<p class="level-item">
<a
class="button is-light is-small is-rounded"
@click="open_browse('recently_played')"
<router-link
v-text="$t('page.browse.show-more')"
class="button is-light is-small is-rounded"
:to="{ name: 'music-browse-recently-played' }"
/>
</p>
</nav>
@ -51,11 +51,11 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import TabsMusic from '@/components/TabsMusic.vue'
import { GroupByList } from '@/lib/GroupByList'
import ListAlbums from '@/components/ListAlbums.vue'
import ListTracks from '@/components/ListTracks.vue'
import TabsMusic from '@/components/TabsMusic.vue'
import webapi from '@/webapi'
import { GroupByList } from '@/lib/GroupByList'
const dataObject = {
load(to) {
@ -107,12 +107,6 @@ export default {
show_track_details_modal: false,
selected_track: {}
}
},
methods: {
open_browse(type) {
this.$router.push({ path: '/music/browse/' + type })
}
}
}
</script>

View File

@ -10,6 +10,9 @@ import PageAudiobooksAlbum from '@/pages/PageAudiobooksAlbum.vue'
import PageAudiobooksAlbums from '@/pages/PageAudiobooksAlbums.vue'
import PageAudiobooksArtist from '@/pages/PageAudiobooksArtist.vue'
import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists.vue'
import PageBrowse from '@/pages/PageBrowse.vue'
import PageBrowseRecentlyAdded from '@/pages/PageBrowseRecentlyAdded.vue'
import PageBrowseRecentlyPlayed from '@/pages/PageBrowseRecentlyPlayed.vue'
import PageFiles from '@/pages/PageFiles.vue'
import PageGenre from '@/pages/PageGenre.vue'
import PageGenreTracks from '@/pages/PageGenreTracks.vue'
@ -25,9 +28,6 @@ import PageSettingsWebinterface from '@/pages/PageSettingsWebinterface.vue'
import PageSettingsArtwork from '@/pages/PageSettingsArtwork.vue'
import PageSettingsOnlineServices from '@/pages/PageSettingsOnlineServices.vue'
import PageSettingsRemotesOutputs from '@/pages/PageSettingsRemotesOutputs.vue'
import PageBrowse from '@/pages/PageBrowse.vue'
import PageBrowseRecentlyAdded from '@/pages/PageBrowseRecentlyAdded.vue'
import PageBrowseRecentlyPlayed from '@/pages/PageBrowseRecentlyPlayed.vue'
import PageComposers from '@/pages/PageComposers.vue'
import PageComposer from '@/pages/PageComposer.vue'
import PageComposerTracks from '@/pages/PageComposerTracks.vue'
@ -115,22 +115,22 @@ export const router = createRouter({
redirect: '/music/browse'
},
{
path: '/music/browse',
name: 'Browse',
component: PageBrowse,
meta: { show_progress: true, has_tabs: true }
meta: { has_tabs: true, show_progress: true },
name: 'music-browse',
path: '/music/browse'
},
{
path: '/music/browse/recently_added',
name: 'Browse Recently Added',
component: PageBrowseRecentlyAdded,
meta: { show_progress: true, has_tabs: true }
meta: { has_tabs: true, show_progress: true },
name: 'music-browse-recently-added',
path: '/music/browse/recently-added'
},
{
path: '/music/browse/recently_played',
name: 'Browse Recently Played',
component: PageBrowseRecentlyPlayed,
meta: { show_progress: true, has_tabs: true }
meta: { has_tabs: true, show_progress: true },
name: 'music-browse-recently-played',
path: '/music/browse/recently-played'
},
{
component: PageFiles,