[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 }">

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,
+    SpotifyModalDialogAlbum
-    CoverArtwork
   },
 
   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.getArtist(to.params.id),
-      spotifyApi.getArtistAlbums(to.params.artist_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,
+    VueEternalLoading
-    CoverArtwork
   },
 
   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) {

web-src/src/router/index.js

@@ -2,8 +2,10 @@ import * as types from '@/store/mutation_types'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import PageAbout from '@/pages/PageAbout.vue'
 import PageAlbum from '@/pages/PageAlbum.vue'
+import PageAlbumSpotify from '@/pages/PageAlbumSpotify.vue'
 import PageAlbums from '@/pages/PageAlbums.vue'
 import PageArtist from '@/pages/PageArtist.vue'
+import PageArtistSpotify from '@/pages/PageArtistSpotify.vue'
 import PageArtistTracks from '@/pages/PageArtistTracks.vue'
 import PageArtists from '@/pages/PageArtists.vue'
 import PageAudiobooksAlbum from '@/pages/PageAudiobooksAlbum.vue'
@@ -13,6 +15,9 @@ import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists.vue'
 import PageBrowse from '@/pages/PageBrowse.vue'
 import PageBrowseRecentlyAdded from '@/pages/PageBrowseRecentlyAdded.vue'
 import PageBrowseRecentlyPlayed from '@/pages/PageBrowseRecentlyPlayed.vue'
+import PageBrowseSpotify from '@/pages/PageBrowseSpotify.vue'
+import PageBrowseSpotifyNewReleases from '@/pages/PageBrowseSpotifyNewReleases.vue'
+import PageBrowseSpotifyFeaturedPlaylists from '@/pages/PageBrowseSpotifyFeaturedPlaylists.vue'
 import PageFiles from '@/pages/PageFiles.vue'
 import PageGenre from '@/pages/PageGenre.vue'
 import PageGenreTracks from '@/pages/PageGenreTracks.vue'
@@ -34,12 +39,6 @@ import PageComposerTracks from '@/pages/PageComposerTracks.vue'
 import PageRadioStreams from '@/pages/PageRadioStreams.vue'
 import PageSearchLibrary from '@/pages/PageSearchLibrary.vue'
 import PageSearchSpotify from '@/pages/PageSearchSpotify.vue'
-import SpotifyPageBrowse from '@/pages/SpotifyPageBrowse.vue'
-import SpotifyPageBrowseNewReleases from '@/pages/SpotifyPageBrowseNewReleases.vue'
-import SpotifyPageBrowseFeaturedPlaylists from '@/pages/SpotifyPageBrowseFeaturedPlaylists.vue'
-import SpotifyPageArtist from '@/pages/SpotifyPageArtist.vue'
-import SpotifyPageAlbum from '@/pages/SpotifyPageAlbum.vue'
-
 import store from '@/store'
 
 export const router = createRouter({
@@ -56,6 +55,12 @@ export const router = createRouter({
       name: 'music-album',
       path: '/music/albums/:id'
     },
+    {
+      component: PageAlbumSpotify,
+      meta: { show_progress: true },
+      name: 'music-spotify-album',
+      path: '/music/spotify/albums/:id'
+    },
     {
       component: PageAlbums,
       meta: { has_index: true, has_tabs: true, show_progress: true },
@@ -68,6 +73,12 @@ export const router = createRouter({
       name: 'music-artist',
       path: '/music/artists/:id'
     },
+    {
+      component: PageArtistSpotify,
+      meta: { show_progress: true },
+      name: 'music-spotify-artist',
+      path: '/music/spotify/artists/:id'
+    },
     {
       component: PageArtists,
       meta: { has_index: true, has_tabs: true, show_progress: true },
@@ -132,6 +143,24 @@ export const router = createRouter({
       name: 'music-browse-recently-played',
       path: '/music/browse/recently-played'
     },
+    {
+      component: PageBrowseSpotify,
+      meta: { has_tabs: true, show_progress: true },
+      name: 'music-spotify',
+      path: '/music/spotify'
+    },
+    {
+      component: PageBrowseSpotifyFeaturedPlaylists,
+      meta: { has_tabs: true, show_progress: true },
+      name: 'music-spotify-featured-playlists',
+      path: '/music/spotify/featured-playlists'
+    },
+    {
+      component: PageBrowseSpotifyNewReleases,
+      meta: { has_tabs: true, show_progress: true },
+      name: 'music-spotify-new-releases',
+      path: '/music/spotify/new-releases'
+    },
     {
       component: PageFiles,
       meta: { show_progress: true },
@@ -258,36 +287,6 @@ export const router = createRouter({
       component: PageSettingsRemotesOutputs,
       name: 'settings-remotes-outputs',
       path: '/settings/remotes-outputs'
-    },
-    {
-      path: '/music/spotify',
-      name: 'Spotify',
-      component: SpotifyPageBrowse,
-      meta: { show_progress: true, has_tabs: true }
-    },
-    {
-      path: '/music/spotify/new-releases',
-      name: 'Spotify Browse New Releases',
-      component: SpotifyPageBrowseNewReleases,
-      meta: { show_progress: true, has_tabs: true }
-    },
-    {
-      path: '/music/spotify/featured-playlists',
-      name: 'Spotify Browse Featured Playlists',
-      component: SpotifyPageBrowseFeaturedPlaylists,
-      meta: { show_progress: true, has_tabs: true }
-    },
-    {
-      path: '/music/spotify/artists/:artist_id',
-      name: 'Spotify Artist',
-      component: SpotifyPageArtist,
-      meta: { show_progress: true }
-    },
-    {
-      path: '/music/spotify/albums/:album_id',
-      name: 'Spotify Album',
-      component: SpotifyPageAlbum,
-      meta: { show_progress: true }
     }
   ],
   scrollBehavior(to, from, savedPosition) {