[web] Use named route for genres

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: 'Genre', params: { genre: genre.name } })
+      this.$router.push({ name: 'music-genre', params: { genre: genre.name } })
     },
 
     open_dialog(genre) {

web-src/src/components/ModalDialogGenre.vue

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

web-src/src/components/ModalDialogQueueItem.vue

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

web-src/src/components/ModalDialogTrack.vue

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

web-src/src/components/NavbarTop.vue

@@ -71,7 +71,7 @@
             <navbar-item-link :to="{ name: 'music-albums' }">
               <span class="pl-5" v-text="$t('navigation.albums')" />
             </navbar-item-link>
-            <navbar-item-link :to="{ path: '/music/genres' }">
+            <navbar-item-link :to="{ name: 'music-genres' }">
               <span class="pl-5" v-text="$t('navigation.genres')" />
             </navbar-item-link>
             <navbar-item-link

web-src/src/components/TabsMusic.vue

@@ -19,7 +19,7 @@
               </router-link>
               <router-link
                 v-slot="{ navigate, isActive }"
-                to="/music/artists"
+                :to="{ name: 'music-artists' }"
                 custom
               >
                 <li :class="{ 'is-active': isActive }">
@@ -35,7 +35,7 @@
               </router-link>
               <router-link
                 v-slot="{ navigate, isActive }"
-                to="/music/albums"
+                :to="{ name: 'music-albums' }"
                 custom
               >
                 <li :class="{ 'is-active': isActive }">
@@ -47,7 +47,7 @@
               </router-link>
               <router-link
                 v-slot="{ navigate, isActive }"
-                to="/music/genres"
+                :to="{ name: 'music-genres' }"
                 custom
               >
                 <li :class="{ 'is-active': isActive }">

web-src/src/pages/PageGenre.vue

@@ -106,7 +106,7 @@ export default {
     open_tracks() {
       this.show_details_modal = false
       this.$router.push({
-        name: 'GenreTracks',
+        name: 'music-genre-tracks',
         params: { genre: this.genre.name }
       })
     },

web-src/src/pages/PageGenreTracks.vue

@@ -55,9 +55,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 ModalDialogGenre from '@/components/ModalDialogGenre.vue'
@@ -146,7 +146,10 @@ export default {
   methods: {
     open_genre() {
       this.show_details_modal = false
-      this.$router.push({ name: 'Genre', params: { genre: this.genre.name } })
+      this.$router.push({
+        name: 'music-genre',
+        params: { genre: this.genre.name }
+      })
     },
 
     play() {

web-src/src/router/index.js

@@ -11,6 +11,9 @@ import PageAudiobooksAlbums from '@/pages/PageAudiobooksAlbums.vue'
 import PageAudiobooksArtist from '@/pages/PageAudiobooksArtist.vue'
 import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists.vue'
 import PageFiles from '@/pages/PageFiles.vue'
+import PageGenre from '@/pages/PageGenre.vue'
+import PageGenreTracks from '@/pages/PageGenreTracks.vue'
+import PageGenres from '@/pages/PageGenres.vue'
 import PagePlaylist from '@/pages/PagePlaylist.vue'
 import PagePlaylistSpotify from '@/pages/PagePlaylistSpotify.vue'
 import PagePlaylistTracks from '@/pages/PagePlaylistTracks.vue'
@@ -21,9 +24,6 @@ import PageQueue from '@/pages/PageQueue.vue'
 import PageBrowse from '@/pages/PageBrowse.vue'
 import PageBrowseRecentlyAdded from '@/pages/PageBrowseRecentlyAdded.vue'
 import PageBrowseRecentlyPlayed from '@/pages/PageBrowseRecentlyPlayed.vue'
-import PageGenres from '@/pages/PageGenres.vue'
-import PageGenre from '@/pages/PageGenre.vue'
-import PageGenreTracks from '@/pages/PageGenreTracks.vue'
 import PageComposers from '@/pages/PageComposers.vue'
 import PageComposer from '@/pages/PageComposer.vue'
 import PageComposerTracks from '@/pages/PageComposerTracks.vue'
@@ -137,23 +137,23 @@ export const router = createRouter({
       path: '/files'
     },
     {
-      path: '/music/genres',
-      name: 'Genres',
-      component: PageGenres,
-      meta: { show_progress: true, has_tabs: true, has_index: true }
-    },
-    {
-      path: '/music/genres/:genre',
-      name: 'Genre',
       component: PageGenre,
-      meta: { show_progress: true, has_index: true }
+      meta: { has_index: true, show_progress: true },
+      path: '/music/genres/:genre',
+      name: 'music-genre'
     },
     {
       path: '/music/genres/:genre/tracks',
-      name: 'GenreTracks',
+      name: 'music-genre-tracks',
       component: PageGenreTracks,
       meta: { show_progress: true, has_index: true }
     },
+    {
+      component: PageGenres,
+      meta: { has_index: true, has_tabs: true, show_progress: true },
+      path: '/music/genres',
+      name: 'music-genres'
+    },
     {
       path: '/music/composers',
       name: 'Composers',