[web] Use named route for audiobook albums

Switching to named routes in order to reduce future maintenance.

web-src/src/components/ListAlbums.vue

@@ -69,13 +69,13 @@
 
 <script>
 import CoverArtwork from '@/components/CoverArtwork.vue'
-import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
 import ModalDialog from '@/components/ModalDialog.vue'
+import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ListAlbums',
-  components: { CoverArtwork, ModalDialogAlbum, ModalDialog },
+  components: { CoverArtwork, ModalDialog, ModalDialogAlbum },
   props: ['albums', 'media_kind', 'hide_group_title'],
   emits: ['play-count-changed', 'podcast-deleted'],
 
@@ -107,7 +107,7 @@ export default {
       if (this.media_kind_resolved === 'podcast') {
         this.$router.push({ path: '/podcasts/' + album.id })
       } else if (this.media_kind_resolved === 'audiobook') {
-        this.$router.push({ path: '/audiobooks/' + album.id })
+        this.$router.push({ name: 'audiobook', params: { id: album.id } })
       } else {
         this.$router.push({ path: '/music/albums/' + album.id })
       }

web-src/src/components/ModalDialogAlbum.vue

@@ -160,7 +160,7 @@ export default {
       if (this.media_kind_resolved === 'podcast') {
         this.$router.push({ path: '/podcasts/' + this.album.id })
       } else if (this.media_kind_resolved === 'audiobook') {
-        this.$router.push({ path: '/audiobooks/' + this.album.id })
+        this.$router.push({ name: 'audiobook', params: { id: this.album.id } })
       } else {
         this.$router.push({ path: '/music/albums/' + this.album.id })
       }

web-src/src/components/ModalDialogQueueItem.vue

@@ -211,7 +211,10 @@ export default {
       if (this.media_kind === 'podcast') {
         this.$router.push({ path: '/podcasts/' + this.item.album_id })
       } else if (this.media_kind === 'audiobook') {
-        this.$router.push({ path: '/audiobooks/' + this.item.album_id })
+        this.$router.push({
+          name: 'audiobook',
+          params: { id: this.item.album_id }
+        })
       } else {
         this.$router.push({ path: '/music/albums/' + this.item.album_id })
       }

web-src/src/components/ModalDialogTrack.vue

@@ -245,7 +245,10 @@ export default {
       if (this.track.media_kind === 'podcast') {
         this.$router.push({ path: '/podcasts/' + this.track.album_id })
       } else if (this.track.media_kind === 'audiobook') {
-        this.$router.push({ path: '/audiobooks/' + this.track.album_id })
+        this.$router.push({
+          name: 'audiobook',
+          params: { id: this.track.album_id }
+        })
       } else {
         this.$router.push({ path: '/music/albums/' + this.track.album_id })
       }

web-src/src/pages/PageAudiobooksAlbum.vue

@@ -51,17 +51,17 @@
 
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'
+import CoverArtwork from '@/components/CoverArtwork.vue'
+import { GroupByList } from '@/lib/GroupByList'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
 import webapi from '@/webapi'
-import { GroupByList } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
     return Promise.all([
-      webapi.library_album(to.params.album_id),
+      webapi.library_album(to.params.id),
-      webapi.library_album_tracks(to.params.album_id)
+      webapi.library_album_tracks(to.params.id)
     ])
   },
 
@@ -73,7 +73,7 @@ const dataObject = {
 
 export default {
   name: 'PageAudiobooksAlbum',
-  components: { ContentWithHero, ListTracks, ModalDialogAlbum, CoverArtwork },
+  components: { ContentWithHero, CoverArtwork, ListTracks, ModalDialogAlbum },
 
   beforeRouteEnter(to, from, next) {
     dataObject.load(to).then((response) => {

web-src/src/router/index.js

@@ -1,6 +1,8 @@
+import * as types from '@/store/mutation_types'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import store from '@/store'
-import * as types from '@/store/mutation_types'
+import PageAudiobooksAlbum from '@/pages/PageAudiobooksAlbum.vue'
+import PageAudiobooksAlbums from '@/pages/PageAudiobooksAlbums.vue'
 import PageQueue from '@/pages/PageQueue.vue'
 import PageNowPlaying from '@/pages/PageNowPlaying.vue'
 import PageBrowse from '@/pages/PageBrowse.vue'
@@ -19,10 +21,8 @@ import PageComposer from '@/pages/PageComposer.vue'
 import PageComposerTracks from '@/pages/PageComposerTracks.vue'
 import PagePodcasts from '@/pages/PagePodcasts.vue'
 import PagePodcast from '@/pages/PagePodcast.vue'
-import PageAudiobooksAlbums from '@/pages/PageAudiobooksAlbums.vue'
 import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists.vue'
 import PageAudiobooksArtist from '@/pages/PageAudiobooksArtist.vue'
-import PageAudiobooksAlbum from '@/pages/PageAudiobooksAlbum.vue'
 import PagePlaylists from '@/pages/PagePlaylists.vue'
 import PagePlaylist from '@/pages/PagePlaylist.vue'
 import PageFiles from '@/pages/PageFiles.vue'
@@ -54,6 +54,12 @@ export const router = createRouter({
       name: 'About',
       component: PageAbout
     },
+    {
+      component: PageAudiobooksAlbum,
+      meta: { show_progress: true },
+      name: 'audiobook',
+      path: '/audiobook/:id'
+    },
     {
       path: '/now-playing',
       name: 'Now playing',
@@ -181,12 +187,6 @@ export const router = createRouter({
       component: PageAudiobooksAlbums,
       meta: { show_progress: true, has_tabs: true, has_index: true }
     },
-    {
-      path: '/audiobooks/:album_id',
-      name: 'Audiobook',
-      component: PageAudiobooksAlbum,
-      meta: { show_progress: true }
-    },
     {
       path: '/radio',
       name: 'Radio',