[web] Use named route for composer pages

Switching to named routes in order to reduce future maintenance.

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 }
       })
     },