[web] Use named route for music artists

Switching to named routes in order to reduce future maintenance.

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() {