[web] Use named route for music albums

Switching to named routes in order to reduce future maintenance.

web-src/src/components/ListAlbums.vue

@@ -112,7 +112,7 @@ export default {
           params: { id: album.id }
         })
       } else {
-        this.$router.push({ path: '/music/albums/' + album.id })
+        this.$router.push({ name: 'music-album', params: { id: album.id } })
       }
     },
 

web-src/src/components/ModalDialogAlbum.vue

@@ -165,7 +165,10 @@ export default {
           params: { id: this.album.id }
         })
       } else {
-        this.$router.push({ path: '/music/albums/' + this.album.id })
+        this.$router.push({
+          name: 'music-album',
+          params: { id: this.album.id }
+        })
       }
     },
 

web-src/src/components/ModalDialogQueueItem.vue

@@ -166,8 +166,8 @@
 </template>
 
 <script>
-import webapi from '@/webapi'
 import SpotifyWebApi from 'spotify-web-api-js'
+import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogQueueItem',
@@ -219,7 +219,10 @@ export default {
           params: { id: this.item.album_id }
         })
       } else {
-        this.$router.push({ path: '/music/albums/' + this.item.album_id })
+        this.$router.push({
+          name: 'music-album',
+          params: { id: this.item.album_id }
+        })
       }
     },
 

web-src/src/components/ModalDialogTrack.vue

@@ -193,8 +193,8 @@
 </template>
 
 <script>
-import webapi from '@/webapi'
 import SpotifyWebApi from 'spotify-web-api-js'
+import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogTrack',
@@ -253,7 +253,10 @@ export default {
           params: { id: this.track.album_id }
         })
       } else {
-        this.$router.push({ path: '/music/albums/' + this.track.album_id })
+        this.$router.push({
+          name: 'music-album',
+          params: { id: this.track.album_id }
+        })
       }
     },
 

web-src/src/components/NavbarTop.vue

@@ -68,7 +68,7 @@
             <navbar-item-link :to="{ name: 'music-artists' }">
               <span class="pl-5" v-text="$t('navigation.artists')" />
             </navbar-item-link>
-            <navbar-item-link :to="{ path: '/music/albums' }">
+            <navbar-item-link :to="{ name: 'music-albums' }">
               <span class="pl-5" v-text="$t('navigation.albums')" />
             </navbar-item-link>
             <navbar-item-link :to="{ path: '/music/genres' }">

web-src/src/pages/PageAlbum.vue

@@ -55,8 +55,8 @@ import webapi from '@/webapi'
 const dataObject = {
   load(to) {
     return Promise.all([
-      webapi.library_album(to.params.album_id),
-      webapi.library_album_tracks(to.params.album_id)
+      webapi.library_album(to.params.id),
+      webapi.library_album_tracks(to.params.id)
     ])
   },
 

web-src/src/router/index.js

@@ -49,7 +49,18 @@ export const router = createRouter({
       name: 'about',
       path: '/about'
     },
-
+    {
+      component: PageAlbum,
+      meta: { show_progress: true },
+      name: 'music-album',
+      path: '/music/albums/:id'
+    },
+    {
+      component: PageAlbums,
+      meta: { has_index: true, has_tabs: true, show_progress: true },
+      name: 'music-albums',
+      path: '/music/albums'
+    },
     {
       component: PageArtist,
       meta: { show_progress: true, has_index: true },
@@ -119,18 +130,6 @@ export const router = createRouter({
       component: PageBrowseRecentlyPlayed,
       meta: { show_progress: true, has_tabs: true }
     },
-    {
-      path: '/music/albums',
-      name: 'Albums',
-      component: PageAlbums,
-      meta: { show_progress: true, has_tabs: true, has_index: true }
-    },
-    {
-      path: '/music/albums/:album_id',
-      name: 'Album',
-      component: PageAlbum,
-      meta: { show_progress: true }
-    },
     {
       component: PageFiles,
       meta: { show_progress: true },