[web] Use named route for playlist pages

Switching to named routes in order to reduce future maintenance.

web-src/src/components/ListItemPlaylistSpotify.vue

@@ -12,13 +12,14 @@
 
 <script>
 export default {
-  name: 'SpotifyListItemPlaylist',
+  name: 'ListItemPlaylistSpotify',
   props: ['playlist'],
 
   methods: {
     open_playlist() {
       this.$router.push({
-        path: '/music/spotify/playlists/' + this.playlist.id
+        name: 'playlist-spotify',
+        params: { id: this.playlist.id }
       })
     }
   }

web-src/src/components/ListPlaylists.vue

@@ -46,9 +46,12 @@ export default {
   methods: {
     open_playlist(playlist) {
       if (playlist.type !== 'folder') {
-        this.$router.push({ path: '/playlists/' + playlist.id + '/tracks' })
+        this.$router.push({
+          name: 'playlist-tracks',
+          params: { id: playlist.id }
+        })
       } else {
-        this.$router.push({ path: '/playlists/' + playlist.id })
+        this.$router.push({ name: 'playlist', params: { id: playlist.id } })
       }
     },
 

web-src/src/components/ModalDialogPlaylist.vue

@@ -89,7 +89,10 @@ export default {
 
     open_playlist() {
       this.$emit('close')
-      this.$router.push({ path: '/playlists/' + this.playlist.id + '/tracks' })
+      this.$router.push({
+        name: 'playlist-tracks',
+        params: { id: this.playlist.id }
+      })
     }
   }
 }

web-src/src/components/ModalDialogPlaylistSpotify.vue

@@ -79,7 +79,7 @@
 import webapi from '@/webapi'
 
 export default {
-  name: 'SpotifyModalDialogPlaylist',
+  name: 'ModalDialogPlaylistSpotify',
   props: ['show', 'playlist'],
   emits: ['close'],
 
@@ -100,8 +100,10 @@ export default {
     },
 
     open_playlist() {
+      this.$emit('close')
       this.$router.push({
-        path: '/music/spotify/playlists/' + this.playlist.id
+        name: 'playlist-spotify',
+        params: { id: this.playlist.id }
       })
     }
   }

web-src/src/components/NavbarTop.vue

@@ -6,10 +6,7 @@
     aria-label="main navigation"
   >
     <div class="navbar-brand">
-      <navbar-item-link
-        v-if="is_visible_playlists"
-        :to="{ path: '/playlists' }"
-      >
+      <navbar-item-link v-if="is_visible_playlists" :to="{ name: 'playlists' }">
         <mdicon class="icon" name="music-box-multiple" size="16" />
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_music" :to="{ path: '/music' }">
@@ -60,7 +57,7 @@
             />
           </a>
           <div class="navbar-dropdown is-right">
-            <navbar-item-link :to="{ path: '/playlists' }">
+            <navbar-item-link :to="{ name: 'playlists' }">
               <mdicon class="icon" name="music-box-multiple" size="16" />
               <b v-text="$t('navigation.playlists')" />
             </navbar-item-link>