[web] Use named route for audiobook albums and artists

Switching to named routes in order to reduce future maintenance.

web-src/src/components/ListAlbums.vue

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

web-src/src/components/ListArtists.vue

@@ -60,7 +60,10 @@ export default {
     open_artist(artist) {
       this.selected_artist = artist
       if (this.media_kind_resolved === 'audiobook') {
-        this.$router.push({ path: '/audiobooks/artists/' + artist.id })
+        this.$router.push({
+          name: 'audiobooks-artist',
+          params: { id: artist.id }
+        })
       } else {
         this.$router.push({ path: '/music/artists/' + artist.id })
       }

web-src/src/components/ModalDialogAlbum.vue

@@ -160,7 +160,10 @@ export default {
       if (this.media_kind_resolved === 'podcast') {
         this.$router.push({ name: 'podcast', params: { id: this.album.id } })
       } else if (this.media_kind_resolved === 'audiobook') {
-        this.$router.push({ name: 'audiobook', params: { id: this.album.id } })
+        this.$router.push({
+          name: 'audiobooks-album',
+          params: { id: this.album.id }
+        })
       } else {
         this.$router.push({ path: '/music/albums/' + this.album.id })
       }
@@ -170,7 +173,8 @@ export default {
       this.$emit('close')
       if (this.media_kind_resolved === 'audiobook') {
         this.$router.push({
-          path: '/audiobooks/artists/' + this.album.artist_id
+          name: 'audiobooks-artist',
+          params: { id: this.album.artist_id }
         })
       } else {
         this.$router.push({ path: '/music/artists/' + this.album.artist_id })

web-src/src/components/ModalDialogQueueItem.vue

@@ -215,7 +215,7 @@ export default {
         })
       } else if (this.media_kind === 'audiobook') {
         this.$router.push({
-          name: 'audiobook',
+          name: 'audiobooks-album',
           params: { id: this.item.album_id }
         })
       } else {

web-src/src/components/ModalDialogTrack.vue

@@ -249,7 +249,7 @@ export default {
         })
       } else if (this.track.media_kind === 'audiobook') {
         this.$router.push({
-          name: 'audiobook',
+          name: 'audiobooks-album',
           params: { id: this.track.album_id }
         })
       } else {

web-src/src/components/NavbarTop.vue

@@ -17,7 +17,7 @@
       </navbar-item-link>
       <navbar-item-link
         v-if="is_visible_audiobooks"
-        :to="{ path: '/audiobooks' }"
+        :to="{ name: 'audiobooks' }"
       >
         <mdicon class="icon" name="book-open-variant" size="16" />
       </navbar-item-link>
@@ -84,7 +84,7 @@
               <mdicon class="icon" name="microphone" size="16" />
               <b v-text="$t('navigation.podcasts')" />
             </navbar-item-link>
-            <navbar-item-link :to="{ path: '/audiobooks' }">
+            <navbar-item-link :to="{ name: 'audiobooks' }">
               <mdicon class="icon" name="book-open-variant" size="16" />
               <b v-text="$t('navigation.audiobooks')" />
             </navbar-item-link>

web-src/src/pages/PageAudiobooksAlbum.vue

@@ -99,7 +99,10 @@ export default {
   methods: {
     open_artist() {
       this.show_details_modal = false
-      this.$router.push({ path: '/audiobooks/artists/' + this.album.artist_id })
+      this.$router.push({
+        name: 'audiobooks-artist',
+        params: { id: this.album.artist_id }
+      })
     },
 
     play() {

web-src/src/pages/PageAudiobooksArtist.vue

@@ -40,16 +40,16 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupByList } from '../lib/GroupByList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
 import webapi from '@/webapi'
-import { GroupByList } from '../lib/GroupByList'
 
 const dataObject = {
   load(to) {
     return Promise.all([
-      webapi.library_artist(to.params.artist_id),
+      webapi.library_artist(to.params.id),
-      webapi.library_artist_albums(to.params.artist_id)
+      webapi.library_artist_albums(to.params.id)
     ])
   },
 

web-src/src/router/index.js

@@ -52,8 +52,31 @@ export const router = createRouter({
     {
       component: PageAudiobooksAlbum,
       meta: { show_progress: true },
-      name: 'audiobook',
+      name: 'audiobooks-album',
-      path: '/audiobook/:id'
+      path: '/audiobooks/album/:id'
+    },
+    {
+      component: PageAudiobooksAlbums,
+      meta: { has_index: true, has_tabs: true, show_progress: true },
+      name: 'audiobooks-albums',
+      path: '/audiobooks/albums'
+    },
+    {
+      component: PageAudiobooksArtist,
+      meta: { show_progress: true },
+      name: 'audiobooks-artist',
+      path: '/audiobooks/artist/:id'
+    },
+    {
+      component: PageAudiobooksArtists,
+      meta: { has_index: true, has_tabs: true, show_progress: true },
+      name: 'audiobooks-artists',
+      path: '/audiobooks/artists'
+    },
+    {
+      name: 'audiobooks',
+      path: '/audiobooks',
+      redirect: '/audiobooks/artists'
     },
     {
       path: '/music',
@@ -194,28 +217,6 @@ export const router = createRouter({
       name: 'radio',
       path: '/radio'
     },
-    {
-      path: '/audiobooks',
-      redirect: '/audiobooks/artists'
-    },
-    {
-      path: '/audiobooks/artists',
-      name: 'AudiobooksArtists',
-      component: PageAudiobooksArtists,
-      meta: { show_progress: true, has_tabs: true, has_index: true }
-    },
-    {
-      path: '/audiobooks/artists/:artist_id',
-      name: 'AudiobooksArtist',
-      component: PageAudiobooksArtist,
-      meta: { show_progress: true }
-    },
-    {
-      path: '/audiobooks/albums',
-      name: 'AudiobooksAlbums',
-      component: PageAudiobooksAlbums,
-      meta: { show_progress: true, has_tabs: true, has_index: true }
-    },
     {
       component: PageQueue,
       name: 'queue',