[web] Use named route for genre pages.

Switching to named routes in order to reduce future maintenance.

web-src/src/components/ListGenres.vue

@@ -57,7 +57,7 @@ export default {
 
   methods: {
     open_genre(genre) {
-      this.$router.push({ name: 'music-genre', params: { genre: genre.name } })
+      this.$router.push({ name: 'music-genre', params: { name: genre.name } })
     },
 
     open_dialog(genre) {

web-src/src/components/ModalDialogGenre.vue

@@ -92,7 +92,7 @@ export default {
       this.$emit('close')
       this.$router.push({
         name: 'music-genre',
-        params: { genre: this.genre.name }
+        params: { name: this.genre.name }
       })
     }
   }

web-src/src/components/ModalDialogQueueItem.vue

@@ -236,7 +236,7 @@ export default {
     open_genre() {
       this.$router.push({
         name: 'music-genre',
-        params: { genre: this.item.genre }
+        params: { name: this.item.genre }
       })
     },
 

web-src/src/components/ModalDialogTrack.vue

@@ -271,7 +271,7 @@ export default {
     open_genre() {
       this.$router.push({
         name: 'music-genre',
-        params: { genre: this.track.genre }
+        params: { name: this.track.genre }
       })
     },
 

web-src/src/pages/PageGenreAlbum.vue

@@ -46,17 +46,17 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupByList, byName } from '@/lib/GroupByList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
 import webapi from '@/webapi'
-import { GroupByList, byName } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
     return Promise.all([
-      webapi.library_genre(to.params.genre),
-      webapi.library_genre_albums(to.params.genre)
+      webapi.library_genre(to.params.name),
+      webapi.library_genre_albums(to.params.name)
     ])
   },
 
@@ -68,7 +68,7 @@ const dataObject = {
 }
 
 export default {
-  name: 'PageGenre',
+  name: 'PageGenreAlbum',
   components: {
     ContentWithHeading,
     IndexButtonList,
@@ -107,7 +107,7 @@ export default {
       this.show_details_modal = false
       this.$router.push({
         name: 'music-genre-tracks',
-        params: { genre: this.genre.name }
+        params: { name: this.genre.name }
       })
     },
 

web-src/src/pages/PageGenreTracks.vue

@@ -66,8 +66,8 @@ import webapi from '@/webapi'
 const dataObject = {
   load(to) {
     return Promise.all([
-      webapi.library_genre(to.params.genre),
-      webapi.library_genre_tracks(to.params.genre)
+      webapi.library_genre(to.params.name),
+      webapi.library_genre_tracks(to.params.name)
     ])
   },
 
@@ -148,7 +148,7 @@ export default {
       this.show_details_modal = false
       this.$router.push({
         name: 'music-genre',
-        params: { genre: this.genre.name }
+        params: { name: this.genre.name }
       })
     },
 

web-src/src/router/index.js

@@ -22,7 +22,7 @@ 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 PageGenreAlbum from '@/pages/PageGenreAlbum.vue'
 import PageGenreTracks from '@/pages/PageGenreTracks.vue'
 import PageGenres from '@/pages/PageGenres.vue'
 import PagePlaylist from '@/pages/PagePlaylist.vue'
@@ -118,12 +118,12 @@ export const router = createRouter({
     {
       name: 'audiobooks',
       path: '/audiobooks',
-      redirect: '/audiobooks/artists'
+      redirect: { name: 'audiobooks-artists' }
     },
     {
       name: 'music',
       path: '/music',
-      redirect: '/music/browse'
+      redirect: { name: 'music-browse' }
     },
     {
       component: PageBrowse,
@@ -186,16 +186,16 @@ export const router = createRouter({
       path: '/files'
     },
     {
-      component: PageGenre,
+      component: PageGenreAlbum,
       meta: { has_index: true, show_progress: true },
-      path: '/music/genres/:genre',
+      path: '/music/genres/:name/albums',
       name: 'music-genre'
     },
     {
-      path: '/music/genres/:genre/tracks',
-      name: 'music-genre-tracks',
       component: PageGenreTracks,
-      meta: { show_progress: true, has_index: true }
+      meta: { has_index: true, show_progress: true },
+      name: 'music-genre-tracks',
+      path: '/music/genres/:name/tracks'
     },
     {
       component: PageGenres,