[web] Use named route for Spotify pages

Switching to named routes in order to reduce future maintenance.

web-src/src/pages/PageAlbumSpotify.vue

@@ -74,19 +74,19 @@
 
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'
+import CoverArtwork from '@/components/CoverArtwork.vue'
 import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
 import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
 import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
+import SpotifyWebApi from 'spotify-web-api-js'
 import store from '@/store'
 import webapi from '@/webapi'
-import SpotifyWebApi from 'spotify-web-api-js'
 
 const dataObject = {
   load(to) {
     const spotifyApi = new SpotifyWebApi()
     spotifyApi.setAccessToken(store.state.spotify.webapi_token)
-    return spotifyApi.getAlbum(to.params.album_id, {
+    return spotifyApi.getAlbum(to.params.id, {
       market: store.state.spotify.webapi_country
     })
   },
@@ -100,10 +100,10 @@ export default {
   name: 'PageAlbum',
   components: {
     ContentWithHero,
+    CoverArtwork,
     SpotifyListItemTrack,
     SpotifyModalDialogTrack,
-    SpotifyModalDialogAlbum,
-    CoverArtwork
+    SpotifyModalDialogAlbum
   },
 
   beforeRouteEnter(to, from, next) {
@@ -142,7 +142,8 @@ export default {
   methods: {
     open_artist() {
       this.$router.push({
-        path: '/music/spotify/artists/' + this.album.artists[0].id
+        name: 'music-spotify-artist',
+        params: { id: this.album.artists[0].id }
       })
     },
 

web-src/src/pages/PageArtistSpotify.vue

@@ -69,14 +69,14 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import CoverArtwork from '@/components/CoverArtwork.vue'
 import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
 import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
 import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
-import store from '@/store'
-import webapi from '@/webapi'
 import SpotifyWebApi from 'spotify-web-api-js'
+import store from '@/store'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
+import webapi from '@/webapi'
 
 const PAGE_SIZE = 50
 
@@ -85,8 +85,8 @@ const dataObject = {
     const spotifyApi = new SpotifyWebApi()
     spotifyApi.setAccessToken(store.state.spotify.webapi_token)
     return Promise.all([
-      spotifyApi.getArtist(to.params.artist_id),
-      spotifyApi.getArtistAlbums(to.params.artist_id, {
+      spotifyApi.getArtist(to.params.id),
+      spotifyApi.getArtistAlbums(to.params.id, {
         limit: PAGE_SIZE,
         offset: 0,
         include_groups: 'album,single',
@@ -109,11 +109,11 @@ export default {
   name: 'SpotifyPageArtist',
   components: {
     ContentWithHeading,
+    CoverArtwork,
     SpotifyListItemAlbum,
     SpotifyModalDialogAlbum,
     SpotifyModalDialogArtist,
-    VueEternalLoading,
-    CoverArtwork
+    VueEternalLoading
   },
 
   beforeRouteEnter(to, from, next) {
@@ -180,7 +180,10 @@ export default {
     },
 
     open_album(album) {
-      this.$router.push({ path: '/music/spotify/albums/' + album.id })
+      this.$router.push({
+        name: 'music-spotify-album',
+        params: { id: album.id }
+      })
     },
 
     open_dialog(album) {

web-src/src/pages/PageBrowseSpotify.vue

@@ -43,7 +43,7 @@
         <nav class="level">
           <p class="level-item">
             <router-link
-              to="/music/spotify/new-releases"
+              :to="{ name: 'music-spotify-new-releases' }"
               class="button is-light is-small is-rounded"
               >{{ $t('page.spotify.browse.show-more') }}</router-link
             >
@@ -85,7 +85,7 @@
         <nav class="level">
           <p class="level-item">
             <router-link
-              to="/music/spotify/featured-playlists"
+              :to="{ name: 'music-spotify-featured-playlists' }"
               class="button is-light is-small is-rounded"
               >{{ $t('page.spotify.browse.show-more') }}</router-link
             >
@@ -196,7 +196,10 @@ export default {
 
   methods: {
     open_album(album) {
-      this.$router.push({ path: '/music/spotify/albums/' + album.id })
+      this.$router.push({
+        name: 'music-spotify-album',
+        params: { id: album.id }
+      })
     },
 
     open_album_dialog(album) {

web-src/src/pages/PageBrowseSpotifyNewReleases.vue

@@ -77,10 +77,10 @@ export default {
   name: 'SpotifyPageBrowseNewReleases',
   components: {
     ContentWithHeading,
-    TabsMusic,
+    CoverArtwork,
     SpotifyListItemAlbum,
     SpotifyModalDialogAlbum,
-    CoverArtwork
+    TabsMusic
   },
 
   beforeRouteEnter(to, from, next) {
@@ -118,7 +118,10 @@ export default {
 
   methods: {
     open_album(album) {
-      this.$router.push({ path: '/music/spotify/albums/' + album.id })
+      this.$router.push({
+        name: 'music-spotify-album',
+        params: { id: album.id }
+      })
     },
 
     open_album_dialog(album) {

web-src/src/pages/PageSearchSpotify.vue

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