[web] Use named route for the files page

Switching to named routes in order to reduce future maintenance.

web-src/src/components/ListDirectories.vue

@@ -54,7 +54,7 @@ export default {
   data() {
     return {
       show_details_modal: false,
-      selected_directory: {}
+      selected_directory: ''
     }
   },
 
@@ -77,10 +77,10 @@ export default {
         parent === '' ||
         this.$store.state.config.directories.includes(this.current_directory)
       ) {
-        this.$router.push({ path: '/files' })
+        this.$router.push({ name: 'files' })
       } else {
         this.$router.push({
-          path: '/files',
+          name: 'files',
           query: {
             directory: this.current_directory.slice(
               0,
@@ -93,13 +93,13 @@ export default {
 
     open_directory(directory) {
       this.$router.push({
-        path: '/files',
+        name: 'files',
         query: { directory: directory.path }
       })
     },
 
     open_dialog(directory) {
-      this.selected_directory = directory
+      this.selected_directory = directory.path
       this.show_details_modal = true
     }
   }

web-src/src/components/NavbarTop.vue

@@ -27,7 +27,7 @@
       <navbar-item-link v-if="is_visible_radio" :to="{ path: '/radio' }">
         <mdicon class="icon" name="radio" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="is_visible_files" :to="{ path: '/files' }">
+      <navbar-item-link v-if="is_visible_files" :to="{ name: 'files' }">
         <mdicon class="icon" name="folder-open" size="16" />
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_search" :to="{ name: 'search' }">
@@ -95,7 +95,7 @@
               <mdicon class="icon" name="radio" size="16" />
               <b v-text="$t('navigation.radio')" />
             </navbar-item-link>
-            <navbar-item-link :to="{ path: '/files' }">
+            <navbar-item-link :to="{ name: 'files' }">
               <mdicon class="icon" name="folder-open" size="16" />
               <b v-text="$t('navigation.files')" />
             </navbar-item-link>

web-src/src/router/index.js

@@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import PageAbout from '@/pages/PageAbout.vue'
 import PageAudiobooksAlbum from '@/pages/PageAudiobooksAlbum.vue'
 import PageAudiobooksAlbums from '@/pages/PageAudiobooksAlbums.vue'
+import PageFiles from '@/pages/PageFiles.vue'
 import PagePodcast from '@/pages/PagePodcast.vue'
 import PagePodcasts from '@/pages/PagePodcasts.vue'
 import PageNowPlaying from '@/pages/PageNowPlaying.vue'
@@ -25,7 +26,6 @@ import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists.vue'
 import PageAudiobooksArtist from '@/pages/PageAudiobooksArtist.vue'
 import PagePlaylists from '@/pages/PagePlaylists.vue'
 import PagePlaylist from '@/pages/PagePlaylist.vue'
-import PageFiles from '@/pages/PageFiles.vue'
 import PageRadioStreams from '@/pages/PageRadioStreams.vue'
 import PageSearchLibrary from '@/pages/PageSearchLibrary.vue'
 import SpotifyPageBrowse from '@/pages/SpotifyPageBrowse.vue'
@@ -107,6 +107,12 @@ export const router = createRouter({
       component: PageAlbum,
       meta: { show_progress: true }
     },
+    {
+      component: PageFiles,
+      meta: { show_progress: true },
+      name: 'files',
+      path: '/files'
+    },
     {
       path: '/music/genres',
       name: 'Genres',
@@ -188,12 +194,6 @@ export const router = createRouter({
       component: PageRadioStreams,
       meta: { show_progress: true }
     },
-    {
-      path: '/files',
-      name: 'Files',
-      component: PageFiles,
-      meta: { show_progress: true }
-    },
     {
       path: '/playlists',
       redirect: '/playlists/0'