[web] Use named route for Spotify pages

Switching to named routes in order to reduce future maintenance.

web-src/src/components/ModalDialogQueueItem.vue

@@ -243,14 +243,16 @@ export default {
     open_spotify_artist() {
       this.$emit('close')
       this.$router.push({
-        path: '/music/spotify/artists/' + this.spotify_track.artists[0].id
+        name: 'music-spotify-artist',
+        params: { id: this.spotify_track.artists[0].id }
       })
     },
 
     open_spotify_album() {
       this.$emit('close')
       this.$router.push({
-        path: '/music/spotify/albums/' + this.spotify_track.album.id
+        name: 'music-spotify-album',
+        params: { id: this.spotify_track.album.id }
       })
     }
   }

web-src/src/components/ModalDialogTrack.vue

@@ -278,14 +278,16 @@ export default {
     open_spotify_artist() {
       this.$emit('close')
       this.$router.push({
-        path: '/music/spotify/artists/' + this.spotify_track.artists[0].id
+        name: 'music-spotify-artist',
+        params: { id: this.spotify_track.artists[0].id }
       })
     },
 
     open_spotify_album() {
       this.$emit('close')
       this.$router.push({
-        path: '/music/spotify/albums/' + this.spotify_track.album.id
+        name: 'music-spotify-album',
+        params: { id: this.spotify_track.album.id }
       })
     },
 

web-src/src/components/NavbarTop.vue

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

web-src/src/components/SpotifyListItemArtist.vue

@@ -16,7 +16,10 @@ export default {
 
   methods: {
     open_artist() {
-      this.$router.push({ path: '/music/spotify/artists/' + this.artist.id })
+      this.$router.push({
+        name: 'music-spotify-artist',
+        params: { id: this.artist.id }
+      })
     }
   }
 }

web-src/src/components/SpotifyModalDialogAlbum.vue

@@ -88,8 +88,8 @@
 </template>
 
 <script>
-import webapi from '@/webapi'
 import CoverArtwork from '@/components/CoverArtwork.vue'
+import webapi from '@/webapi'
 
 export default {
   name: 'SpotifyModalDialogAlbum',
@@ -129,12 +129,16 @@ export default {
     },
 
     open_album() {
-      this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
+      this.$router.push({
+        name: 'music-spotify-album',
+        params: { id: this.album.id }
+      })
     },
 
     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/components/SpotifyModalDialogArtist.vue

@@ -95,7 +95,10 @@ export default {
     },
 
     open_artist() {
-      this.$router.push({ path: '/music/spotify/artists/' + this.artist.id })
+      this.$router.push({
+        name: 'music-spotify-artist',
+        params: { id: this.artist.id }
+      })
     }
   }
 }

web-src/src/components/SpotifyModalDialogTrack.vue

@@ -130,12 +130,16 @@ export default {
     },
 
     open_album() {
-      this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
+      this.$router.push({
+        name: 'music-spotify-album',
+        params: { id: this.album.id }
+      })
     },
 
     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/components/TabsMusic.vue

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