[web] Use named route for the library search page

Switching to named routes in order to reduce future maintenance.

web-src/src/components/NavbarTop.vue

@@ -30,7 +30,7 @@
       <navbar-item-link v-if="is_visible_files" :to="{ path: '/files' }">
         <mdicon class="icon" name="folder-open" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="is_visible_search" :to="{ path: '/search' }">
+      <navbar-item-link v-if="is_visible_search" :to="{ name: 'search' }">
         <mdicon class="icon" name="magnify" size="16" />
       </navbar-item-link>
       <div
@@ -99,7 +99,7 @@
               <mdicon class="icon" name="folder-open" size="16" />
               <b v-text="$t('navigation.files')" />
             </navbar-item-link>
-            <navbar-item-link :to="{ path: '/search' }">
+            <navbar-item-link :to="{ name: 'search' }">
               <mdicon class="icon" name="magnify" size="16" />
               <b v-text="$t('navigation.search')" />
             </navbar-item-link>

web-src/src/pages/PageSearchLibrary.vue

@@ -256,29 +256,29 @@
 </template>
 
 <script>
-import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import * as types from '@/store/mutation_types'
 import ContentText from '@/templates/ContentText.vue'
-import TabsSearch from '@/components/TabsSearch.vue'
+import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import ListTracks from '@/components/ListTracks.vue'
+import { GroupByList } from '@/lib/GroupByList'
-import ListArtists from '@/components/ListArtists.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
+import ListArtists from '@/components/ListArtists.vue'
 import ListComposers from '@/components/ListComposers.vue'
 import ListPlaylists from '@/components/ListPlaylists.vue'
+import ListTracks from '@/components/ListTracks.vue'
+import TabsSearch from '@/components/TabsSearch.vue'
 import webapi from '@/webapi'
-import * as types from '@/store/mutation_types'
-import { GroupByList } from '@/lib/GroupByList'
 
 export default {
-  name: 'PageSearch',
+  name: 'PageSearchLibrary',
   components: {
-    ContentWithHeading,
     ContentText,
-    TabsSearch,
+    ContentWithHeading,
-    ListTracks,
-    ListArtists,
     ListAlbums,
+    ListArtists,
+    ListComposers,
     ListPlaylists,
-    ListComposers
+    ListTracks,
+    TabsSearch,
   },
 
   data() {
@@ -498,7 +498,7 @@ export default {
 
     open_search_tracks() {
       this.$router.push({
-        path: '/search/library',
+        name: 'search-library',
         query: {
           type: 'track',
           query: this.$route.query.query
@@ -508,7 +508,7 @@ export default {
 
     open_search_artists() {
       this.$router.push({
-        path: '/search/library',
+        name: 'search-library',
         query: {
           type: 'artist',
           query: this.$route.query.query
@@ -518,7 +518,7 @@ export default {
 
     open_search_albums() {
       this.$router.push({
-        path: '/search/library',
+        name: 'search-library',
         query: {
           type: 'album',
           query: this.$route.query.query
@@ -528,7 +528,7 @@ export default {
 
     open_search_composers() {
       this.$router.push({
-        path: '/search/library',
+        name: 'search-library',
         query: {
           type: 'tracks',
           query: this.$route.query.query
@@ -538,7 +538,7 @@ export default {
 
     open_search_playlists() {
       this.$router.push({
-        path: '/search/library',
+        name: 'search-library',
         query: {
           type: 'playlist',
           query: this.$route.query.query
@@ -548,7 +548,7 @@ export default {
 
     open_search_audiobooks() {
       this.$router.push({
-        path: '/search/library',
+        name: 'search-library',
         query: {
           type: 'audiobook',
           query: this.$route.query.query
@@ -558,7 +558,7 @@ export default {
 
     open_search_podcasts() {
       this.$router.push({
-        path: '/search/library',
+        name: 'search-library',
         query: {
           type: 'podcast',
           query: this.$route.query.query

web-src/src/router/index.js

@@ -27,7 +27,7 @@ import PagePlaylists from '@/pages/PagePlaylists.vue'
 import PagePlaylist from '@/pages/PagePlaylist.vue'
 import PageFiles from '@/pages/PageFiles.vue'
 import PageRadioStreams from '@/pages/PageRadioStreams.vue'
-import PageSearch from '@/pages/PageSearch.vue'
+import PageSearchLibrary from '@/pages/PageSearchLibrary.vue'
 import SpotifyPageBrowse from '@/pages/SpotifyPageBrowse.vue'
 import SpotifyPageBrowseNewReleases from '@/pages/SpotifyPageBrowseNewReleases.vue'
 import SpotifyPageBrowseFeaturedPlaylists from '@/pages/SpotifyPageBrowseFeaturedPlaylists.vue'
@@ -216,13 +216,14 @@ export const router = createRouter({
       path: '/'
     },
     {
+      name: 'search',
       path: '/search',
       redirect: '/search/library'
     },
     {
-      path: '/search/library',
+      component: PageSearchLibrary,
-      name: 'Search Library',
+      name: 'search-library',
-      component: PageSearch
+      path: '/search/library'
     },
     {
       path: '/music/spotify',