[web] Use named route for composer pages

Switching to named routes in order to reduce future maintenance.

web-src/src/components/ListComposers.vue

@@ -61,8 +61,8 @@ export default {
     open_composer(composer) {
       this.selected_composer = composer
       this.$router.push({
-        name: 'ComposerAlbums',
-        params: { composer: composer.name }
+        name: 'music-composer-albums',
+        params: { name: composer.name }
       })
     },
 

web-src/src/components/ModalDialogComposer.vue

@@ -100,16 +100,16 @@ export default {
     open_albums() {
       this.$emit('close')
       this.$router.push({
-        name: 'ComposerAlbums',
-        params: { composer: this.composer.name }
+        name: 'music-composer-albums',
+        params: { name: this.composer.name }
       })
     },
 
     open_tracks() {
       this.show_details_modal = false
       this.$router.push({
-        name: 'ComposerTracks',
-        params: { composer: this.composer.name }
+        name: 'music-composer-tracks',
+        params: { name: this.composer.name }
       })
     }
   }

web-src/src/components/TabsMusic.vue

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

web-src/src/pages/PageComposerAlbums.vue

@@ -47,16 +47,16 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupByList } from '@/lib/GroupByList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
 import webapi from '@/webapi'
-import { GroupByList } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
     return Promise.all([
-      webapi.library_composer(to.params.composer),
-      webapi.library_composer_albums(to.params.composer)
+      webapi.library_composer(to.params.name),
+      webapi.library_composer_albums(to.params.name)
     ])
   },
 
@@ -67,7 +67,7 @@ const dataObject = {
 }
 
 export default {
-  name: 'PageComposer',
+  name: 'PageComposerAlbums',
   components: {
     ContentWithHeading,
     ListAlbums,
@@ -98,8 +98,8 @@ export default {
   methods: {
     open_tracks() {
       this.$router.push({
-        name: 'ComposerTracks',
-        params: { composer: this.composer.name }
+        name: 'music-composer-tracks',
+        params: { name: this.composer.name }
       })
     },
 

web-src/src/pages/PageComposerTracks.vue

@@ -61,9 +61,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
@@ -72,8 +72,8 @@ import webapi from '@/webapi'
 const dataObject = {
   load(to) {
     return Promise.all([
-      webapi.library_composer(to.params.composer),
-      webapi.library_composer_tracks(to.params.composer)
+      webapi.library_composer(to.params.name),
+      webapi.library_composer_tracks(to.params.name)
     ])
   },
 
@@ -153,8 +153,8 @@ export default {
     open_albums() {
       this.show_details_modal = false
       this.$router.push({
-        name: 'ComposerAlbums',
-        params: { composer: this.composer.name }
+        name: 'music-composer-album',
+        params: { name: this.composer.name }
       })
     },
 

web-src/src/pages/PageComposers.vue

@@ -21,11 +21,11 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import TabsMusic from '@/components/TabsMusic.vue'
+import { GroupByList, byName } from '@/lib/GroupByList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListComposers from '@/components/ListComposers.vue'
+import TabsMusic from '@/components/TabsMusic.vue'
 import webapi from '@/webapi'
-import { GroupByList, byName } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
@@ -40,7 +40,7 @@ const dataObject = {
 
 export default {
   name: 'PageComposers',
-  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListComposers },
+  components: { ContentWithHeading, IndexButtonList, ListComposers, TabsMusic },
 
   beforeRouteEnter(to, from, next) {
     dataObject.load(to).then((response) => {

web-src/src/pages/PageSearchLibrary.vue

@@ -568,8 +568,8 @@ export default {
 
     open_composer(composer) {
       this.$router.push({
-        name: 'ComposerAlbums',
-        params: { composer: composer.name }
+        name: 'music-composer-albums',
+        params: { name: composer.name }
       })
     },
 

web-src/src/router/index.js

@@ -18,6 +18,9 @@ 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 PageComposerAlbums from '@/pages/PageComposerAlbums.vue'
+import PageComposerTracks from '@/pages/PageComposerTracks.vue'
+import PageComposers from '@/pages/PageComposers.vue'
 import PageFiles from '@/pages/PageFiles.vue'
 import PageGenre from '@/pages/PageGenre.vue'
 import PageGenreTracks from '@/pages/PageGenreTracks.vue'
@@ -33,9 +36,6 @@ import PageSettingsWebinterface from '@/pages/PageSettingsWebinterface.vue'
 import PageSettingsArtwork from '@/pages/PageSettingsArtwork.vue'
 import PageSettingsOnlineServices from '@/pages/PageSettingsOnlineServices.vue'
 import PageSettingsRemotesOutputs from '@/pages/PageSettingsRemotesOutputs.vue'
-import PageComposers from '@/pages/PageComposers.vue'
-import PageComposer from '@/pages/PageComposer.vue'
-import PageComposerTracks from '@/pages/PageComposerTracks.vue'
 import PageRadioStreams from '@/pages/PageRadioStreams.vue'
 import PageSearchLibrary from '@/pages/PageSearchLibrary.vue'
 import PageSearchSpotify from '@/pages/PageSearchSpotify.vue'
@@ -161,6 +161,24 @@ export const router = createRouter({
       name: 'music-spotify-new-releases',
       path: '/music/spotify/new-releases'
     },
+    {
+      component: PageComposerAlbums,
+      meta: { show_progress: true, has_index: true },
+      name: 'music-composer-albums',
+      path: '/music/composers/:name/albums'
+    },
+    {
+      component: PageComposerTracks,
+      meta: { has_index: true, show_progress: true },
+      name: 'music-composer-tracks',
+      path: '/music/composers/:name/tracks'
+    },
+    {
+      component: PageComposers,
+      meta: { has_index: true, has_tabs: true, show_progress: true },
+      name: 'music-composers',
+      path: '/music/composers'
+    },
     {
       component: PageFiles,
       meta: { show_progress: true },
@@ -185,24 +203,6 @@ export const router = createRouter({
       path: '/music/genres',
       name: 'music-genres'
     },
-    {
-      path: '/music/composers',
-      name: 'Composers',
-      component: PageComposers,
-      meta: { show_progress: true, has_tabs: true, has_index: true }
-    },
-    {
-      path: '/music/composers/:composer/albums',
-      name: 'ComposerAlbums',
-      component: PageComposer,
-      meta: { show_progress: true, has_index: true }
-    },
-    {
-      path: '/music/composers/:composer/tracks',
-      name: 'ComposerTracks',
-      component: PageComposerTracks,
-      meta: { show_progress: true, has_index: true }
-    },
     {
       component: PageNowPlaying,
       name: 'now-playing',