[web] Use named route for Spotify pages

Switching to named routes in order to reduce future maintenance.

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) {