[web] Use named route for the Spotify search page

Switching to named routes in order to reduce future maintenance.

web-src/src/pages/PageSearchSpotify.vue

@@ -268,41 +268,41 @@
 </template>
 
 <script>
-import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import ContentText from '@/templates/ContentText.vue'
-import TabsSearch from '@/components/TabsSearch.vue'
-import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
-import SpotifyListItemArtist from '@/components/SpotifyListItemArtist.vue'
-import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
-import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist.vue'
-import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
-import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist.vue'
-import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
-import SpotifyModalDialogPlaylist from '@/components/SpotifyModalDialogPlaylist.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
-import SpotifyWebApi from 'spotify-web-api-js'
-import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
+import ContentText from '@/templates/ContentText.vue'
+import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import CoverArtwork from '@/components/CoverArtwork.vue'
+import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
+import SpotifyListItemArtist from '@/components/SpotifyListItemArtist.vue'
+import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
+import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist.vue'
+import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
+import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist.vue'
+import SpotifyModalDialogPlaylist from '@/components/SpotifyModalDialogPlaylist.vue'
+import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
+import SpotifyWebApi from 'spotify-web-api-js'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
+import webapi from '@/webapi'
+import TabsSearch from '@/components/TabsSearch.vue'
 
 const PAGE_SIZE = 50
 
 export default {
-  name: 'SpotifyPageSearch',
+  name: 'PageSearchSpotify',
   components: {
-    ContentWithHeading,
     ContentText,
-    TabsSearch,
+    ContentWithHeading,
-    SpotifyListItemTrack,
+    CoverArtwork,
-    SpotifyListItemArtist,
     SpotifyListItemAlbum,
+    SpotifyListItemArtist,
     SpotifyListItemPlaylist,
-    SpotifyModalDialogTrack,
+    SpotifyListItemTrack,
-    SpotifyModalDialogArtist,
     SpotifyModalDialogAlbum,
+    SpotifyModalDialogArtist,
     SpotifyModalDialogPlaylist,
+    SpotifyModalDialogTrack,
     VueEternalLoading,
-    CoverArtwork
+    TabsSearch
   },
 
   data() {
@@ -491,7 +491,7 @@ export default {
       }
 
       this.$router.push({
-        path: '/search/spotify',
+        name: 'search-spotify',
         query: {
           type: 'track,artist,album,playlist,audiobook,podcast',
           query: this.search_query,
@@ -504,7 +504,7 @@ export default {
 
     open_search_tracks() {
       this.$router.push({
-        path: '/search/spotify',
+        name: 'search-spotify',
         query: {
           type: 'track',
           query: this.$route.query.query
@@ -514,7 +514,7 @@ export default {
 
     open_search_artists() {
       this.$router.push({
-        path: '/search/spotify',
+        name: 'search-spotify',
         query: {
           type: 'artist',
           query: this.$route.query.query
@@ -524,7 +524,7 @@ export default {
 
     open_search_albums() {
       this.$router.push({
-        path: '/search/spotify',
+        name: 'search-spotify',
         query: {
           type: 'album',
           query: this.$route.query.query
@@ -534,7 +534,7 @@ export default {
 
     open_search_playlists() {
       this.$router.push({
-        path: '/search/spotify',
+        name: 'search-spotify',
         query: {
           type: 'playlist',
           query: this.$route.query.query

web-src/src/router/index.js

@@ -28,13 +28,13 @@ import PagePlaylists from '@/pages/PagePlaylists.vue'
 import PagePlaylist from '@/pages/PagePlaylist.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 SpotifyPagePlaylist from '@/pages/SpotifyPagePlaylist.vue'
-import SpotifyPageSearch from '@/pages/SpotifyPageSearch.vue'
 import SettingsPageWebinterface from '@/pages/SettingsPageWebinterface.vue'
 import SettingsPageArtwork from '@/pages/SettingsPageArtwork.vue'
 import SettingsPageOnlineServices from '@/pages/SettingsPageOnlineServices.vue'
@@ -225,6 +225,11 @@ export const router = createRouter({
       name: 'search-library',
       path: '/search/library'
     },
+    {
+      component: PageSearchSpotify,
+      name: 'search-spotify',
+      path: '/search/spotify',
+    },
     {
       path: '/music/spotify',
       name: 'Spotify',
@@ -261,11 +266,6 @@ export const router = createRouter({
       component: SpotifyPagePlaylist,
       meta: { show_progress: true }
     },
-    {
-      path: '/search/spotify',
-      name: 'Spotify Search',
-      component: SpotifyPageSearch
-    },
     {
       path: '/settings/webinterface',
       name: 'Settings Webinterface',