[web] Use named route for music artists

Switching to named routes in order to reduce future maintenance.

web-src/src/components/ListArtists.vue

@@ -65,7 +65,7 @@ export default {
           params: { id: artist.id }
         })
       } else {
-        this.$router.push({ path: '/music/artists/' + artist.id })
+        this.$router.push({ name: 'music-artist', params: { id: artist.id } })
       }
     },
 

web-src/src/components/ModalDialogAlbum.vue

@@ -177,7 +177,10 @@ export default {
           params: { id: this.album.artist_id }
         })
       } else {
-        this.$router.push({ path: '/music/artists/' + this.album.artist_id })
+        this.$router.push({
+          name: 'music-artist',
+          params: { id: this.album.artist_id }
+        })
       }
     },
 

web-src/src/components/ModalDialogArtist.vue

@@ -90,7 +90,10 @@ export default {
 
     open_artist() {
       this.$emit('close')
-      this.$router.push({ path: '/music/artists/' + this.artist.id })
+      this.$router.push({
+        name: 'music-artist',
+        params: { id: this.artist.id }
+      })
     }
   }
 }

web-src/src/components/ModalDialogQueueItem.vue

@@ -224,7 +224,10 @@ export default {
     },
 
     open_album_artist() {
-      this.$router.push({ path: '/music/artists/' + this.item.album_artist_id })
+      this.$router.push({
+        name: 'music-artist',
+        params: { id: this.item.album_artist_id }
+      })
     },
 
     open_genre() {

web-src/src/components/ModalDialogTrack.vue

@@ -260,7 +260,8 @@ export default {
     open_artist() {
       this.$emit('close')
       this.$router.push({
-        path: '/music/artists/' + this.track.album_artist_id
+        name: 'music-artist',
+        params: { id: this.track.album_artist_id }
       })
     },
 

web-src/src/components/NavbarTop.vue

@@ -65,7 +65,7 @@
               <mdicon class="icon" name="music" size="16" />
               <b v-text="$t('navigation.music')" />
             </navbar-item-link>
-            <navbar-item-link :to="{ path: '/music/artists' }">
+            <navbar-item-link :to="{ name: 'music-artists' }">
               <span class="pl-5" v-text="$t('navigation.artists')" />
             </navbar-item-link>
             <navbar-item-link :to="{ path: '/music/albums' }">

web-src/src/pages/PageAlbum.vue

@@ -46,11 +46,11 @@
 
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'
+import CoverArtwork from '@/components/CoverArtwork.vue'
+import { GroupByList } from '@/lib/GroupByList'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
 import webapi from '@/webapi'
-import { GroupByList } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
@@ -94,7 +94,10 @@ export default {
   methods: {
     open_artist() {
       this.show_details_modal = false
-      this.$router.push({ path: '/music/artists/' + this.album.artist_id })
+      this.$router.push({
+        name: 'music-artist',
+        params: { id: this.album.artist_id }
+      })
     },
 
     play() {

web-src/src/pages/PageArtist.vue

@@ -57,19 +57,19 @@
 </template>
 
 <script>
+import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupByList, byName, byYear } from '@/lib/GroupByList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
 import webapi from '@/webapi'
-import * as types from '@/store/mutation_types'
-import { GroupByList, byName, byYear } from '@/lib/GroupByList'
 
 const dataObject = {
   load(to) {
     return Promise.all([
-      webapi.library_artist(to.params.artist_id),
-      webapi.library_artist_albums(to.params.artist_id)
+      webapi.library_artist(to.params.id),
+      webapi.library_artist_albums(to.params.id)
     ])
   },
 
@@ -146,7 +146,8 @@ export default {
   methods: {
     open_tracks() {
       this.$router.push({
-        path: '/music/artists/' + this.artist.id + '/tracks'
+        name: 'music-artist-tracks',
+        params: { id: this.artist.id }
       })
     },
 

web-src/src/pages/PageArtistTracks.vue

@@ -70,8 +70,8 @@ import webapi from '@/webapi'
 const dataObject = {
   load(to) {
     return Promise.all([
-      webapi.library_artist(to.params.artist_id),
-      webapi.library_artist_tracks(to.params.artist_id)
+      webapi.library_artist(to.params.id),
+      webapi.library_artist_tracks(to.params.id)
     ])
   },
 
@@ -150,7 +150,10 @@ export default {
   methods: {
     open_artist() {
       this.show_details_modal = false
-      this.$router.push({ path: '/music/artists/' + this.artist.id })
+      this.$router.push({
+        name: 'music-artist',
+        params: { id: this.artist.id }
+      })
     },
 
     play() {

web-src/src/router/index.js

@@ -1,8 +1,15 @@
 import * as types from '@/store/mutation_types'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import PageAbout from '@/pages/PageAbout.vue'
+import PageAlbum from '@/pages/PageAlbum.vue'
+import PageAlbums from '@/pages/PageAlbums.vue'
+import PageArtist from '@/pages/PageArtist.vue'
+import PageArtistTracks from '@/pages/PageArtistTracks.vue'
+import PageArtists from '@/pages/PageArtists.vue'
 import PageAudiobooksAlbum from '@/pages/PageAudiobooksAlbum.vue'
 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 PagePlaylist from '@/pages/PagePlaylist.vue'
 import PagePlaylistSpotify from '@/pages/PagePlaylistSpotify.vue'
@@ -14,19 +21,12 @@ 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 PageArtists from '@/pages/PageArtists.vue'
-import PageArtist from '@/pages/PageArtist.vue'
-import PageAlbums from '@/pages/PageAlbums.vue'
-import PageAlbum from '@/pages/PageAlbum.vue'
 import PageGenres from '@/pages/PageGenres.vue'
 import PageGenre from '@/pages/PageGenre.vue'
 import PageGenreTracks from '@/pages/PageGenreTracks.vue'
-import PageArtistTracks from '@/pages/PageArtistTracks.vue'
 import PageComposers from '@/pages/PageComposers.vue'
 import PageComposer from '@/pages/PageComposer.vue'
 import PageComposerTracks from '@/pages/PageComposerTracks.vue'
-import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists.vue'
-import PageAudiobooksArtist from '@/pages/PageAudiobooksArtist.vue'
 import PageRadioStreams from '@/pages/PageRadioStreams.vue'
 import PageSearchLibrary from '@/pages/PageSearchLibrary.vue'
 import PageSearchSpotify from '@/pages/PageSearchSpotify.vue'
@@ -49,11 +49,30 @@ export const router = createRouter({
       name: 'about',
       path: '/about'
     },
+
+    {
+      component: PageArtist,
+      meta: { show_progress: true, has_index: true },
+      name: 'music-artist',
+      path: '/music/artists/:id'
+    },
+    {
+      component: PageArtists,
+      meta: { has_index: true, has_tabs: true, show_progress: true },
+      name: 'music-artists',
+      path: '/music/artists'
+    },
+    {
+      component: PageArtistTracks,
+      meta: { has_index: true, show_progress: true },
+      name: 'music-artist-tracks',
+      path: '/music/artists/:id/tracks'
+    },
     {
       component: PageAudiobooksAlbum,
       meta: { show_progress: true },
       name: 'audiobooks-album',
-      path: '/audiobooks/album/:id'
+      path: '/audiobooks/albums/:id'
     },
     {
       component: PageAudiobooksAlbums,
@@ -65,7 +84,7 @@ export const router = createRouter({
       component: PageAudiobooksArtist,
       meta: { show_progress: true },
       name: 'audiobooks-artist',
-      path: '/audiobooks/artist/:id'
+      path: '/audiobooks/artists/:id'
     },
     {
       component: PageAudiobooksArtists,
@@ -100,24 +119,6 @@ export const router = createRouter({
       component: PageBrowseRecentlyPlayed,
       meta: { show_progress: true, has_tabs: true }
     },
-    {
-      path: '/music/artists',
-      name: 'Artists',
-      component: PageArtists,
-      meta: { show_progress: true, has_tabs: true, has_index: true }
-    },
-    {
-      path: '/music/artists/:artist_id',
-      name: 'Artist',
-      component: PageArtist,
-      meta: { show_progress: true, has_index: true }
-    },
-    {
-      path: '/music/artists/:artist_id/tracks',
-      name: 'Tracks',
-      component: PageArtistTracks,
-      meta: { show_progress: true, has_index: true }
-    },
     {
       path: '/music/albums',
       name: 'Albums',
@@ -179,31 +180,31 @@ export const router = createRouter({
     },
     {
       name: 'playlists',
-      redirect: '/playlist/0'
+      redirect: '/playlists/0'
     },
     {
       component: PagePlaylist,
       meta: { show_progress: true },
       name: 'playlist',
-      path: '/playlist/:id'
+      path: '/playlists/:id'
     },
     {
       component: PagePlaylistSpotify,
       meta: { show_progress: true },
       name: 'playlist-spotify',
-      path: '/playlist/spotify/:id'
+      path: '/playlists/spotify/:id'
     },
     {
       component: PagePlaylistTracks,
       meta: { show_progress: true },
       name: 'playlist-tracks',
-      path: '/playlist/:id/tracks'
+      path: '/playlists/:id/tracks'
     },
     {
       component: PagePodcast,
       meta: { show_progress: true },
       name: 'podcast',
-      path: '/podcast/:id'
+      path: '/podcasts/:id'
     },
     {
       component: PagePodcasts,