[web] Use named route for the about page

Switching to named routes in order to reduce future maintenance.

web-src/src/components/NavbarBottom.vue

@@ -107,12 +107,12 @@
       </div>
     </div>
     <div class="navbar-brand is-flex-grow-1">
-      <navbar-item-link to="/" exact class="mr-auto">
+      <navbar-item-link :to="{ path: '/' }" exact class="mr-auto">
         <mdicon class="icon" name="playlist-play" size="24" />
       </navbar-item-link>
       <navbar-item-link
         v-if="!is_now_playing_page"
-        to="/now-playing"
+        :to="{ path: '/now-playing' }"
         exact
         class="navbar-item fd-is-text-clipped is-expanded is-clipped is-size-7"
       >
@@ -267,14 +267,14 @@ import ControlSlider from '@/components/ControlSlider.vue'
 import { mdiCancel } from '@mdi/js'
 import NavbarItemLink from './NavbarItemLink.vue'
 import NavbarItemOutput from './NavbarItemOutput.vue'
-import PlayerButtonPlayPause from '@/components/PlayerButtonPlayPause.vue'
-import PlayerButtonNext from '@/components/PlayerButtonNext.vue'
-import PlayerButtonPrevious from '@/components/PlayerButtonPrevious.vue'
-import PlayerButtonShuffle from '@/components/PlayerButtonShuffle.vue'
 import PlayerButtonConsume from '@/components/PlayerButtonConsume.vue'
+import PlayerButtonNext from '@/components/PlayerButtonNext.vue'
+import PlayerButtonPlayPause from '@/components/PlayerButtonPlayPause.vue'
+import PlayerButtonPrevious from '@/components/PlayerButtonPrevious.vue'
 import PlayerButtonRepeat from '@/components/PlayerButtonRepeat.vue'
 import PlayerButtonSeekBack from '@/components/PlayerButtonSeekBack.vue'
 import PlayerButtonSeekForward from '@/components/PlayerButtonSeekForward.vue'
+import PlayerButtonShuffle from '@/components/PlayerButtonShuffle.vue'
 import webapi from '@/webapi'
 
 export default {
@@ -283,14 +283,14 @@ export default {
     ControlSlider,
     NavbarItemLink,
     NavbarItemOutput,
-    PlayerButtonPlayPause,
-    PlayerButtonNext,
-    PlayerButtonPrevious,
-    PlayerButtonShuffle,
     PlayerButtonConsume,
+    PlayerButtonNext,
+    PlayerButtonPlayPause,
+    PlayerButtonPrevious,
     PlayerButtonRepeat,
+    PlayerButtonSeekBack,
     PlayerButtonSeekForward,
-    PlayerButtonSeekBack
+    PlayerButtonShuffle
   },
 
   data() {

web-src/src/components/NavbarItemLink.vue

@@ -15,7 +15,7 @@ import * as types from '@/store/mutation_types'
 export default {
   name: 'NavbarItemLink',
   props: {
-    to: String,
+    to: Object,
     exact: Boolean
   },
 
@@ -54,7 +54,7 @@ export default {
       if (this.show_player_menu) {
         this.$store.commit(types.SHOW_PLAYER_MENU, false)
       }
-      this.$router.push({ path: this.to })
+      this.$router.push(this.to)
     },
 
     full_path() {

web-src/src/components/NavbarTop.vue

@@ -6,25 +6,31 @@
     aria-label="main navigation"
   >
     <div class="navbar-brand">
-      <navbar-item-link v-if="is_visible_playlists" to="/playlists">
+      <navbar-item-link
+        v-if="is_visible_playlists"
+        :to="{ path: '/playlists' }"
+      >
         <mdicon class="icon" name="music-box-multiple" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="is_visible_music" to="/music">
+      <navbar-item-link v-if="is_visible_music" :to="{ path: '/music' }">
         <mdicon class="icon" name="music" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="is_visible_podcasts" to="/podcasts">
+      <navbar-item-link v-if="is_visible_podcasts" :to="{ path: '/podcasts' }">
         <mdicon class="icon" name="microphone" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="is_visible_audiobooks" to="/audiobooks">
+      <navbar-item-link
+        v-if="is_visible_audiobooks"
+        :to="{ path: '/audiobooks' }"
+      >
         <mdicon class="icon" name="book-open-variant" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="is_visible_radio" to="/radio">
+      <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="/files">
+      <navbar-item-link v-if="is_visible_files" :to="{ path: '/files' }">
         <mdicon class="icon" name="folder-open" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="is_visible_search" to="/search">
+      <navbar-item-link v-if="is_visible_search" :to="{ path: '/search' }">
         <mdicon class="icon" name="magnify" size="16" />
       </navbar-item-link>
       <div
@@ -54,48 +60,51 @@
             />
           </a>
           <div class="navbar-dropdown is-right">
-            <navbar-item-link to="/playlists">
+            <navbar-item-link :to="{ path: '/playlists' }">
               <mdicon class="icon" name="music-box-multiple" size="16" />
               <b v-text="$t('navigation.playlists')" />
             </navbar-item-link>
-            <navbar-item-link to="/music" exact>
+            <navbar-item-link :to="{ path: '/music' }" exact>
               <mdicon class="icon" name="music" size="16" />
               <b v-text="$t('navigation.music')" />
             </navbar-item-link>
-            <navbar-item-link to="/music/artists">
+            <navbar-item-link :to="{ path: '/music/artists' }">
               <span class="pl-5" v-text="$t('navigation.artists')" />
             </navbar-item-link>
-            <navbar-item-link to="/music/albums">
+            <navbar-item-link :to="{ path: '/music/albums' }">
               <span class="pl-5" v-text="$t('navigation.albums')" />
             </navbar-item-link>
-            <navbar-item-link to="/music/genres">
+            <navbar-item-link :to="{ path: '/music/genres' }">
               <span class="pl-5" v-text="$t('navigation.genres')" />
             </navbar-item-link>
-            <navbar-item-link v-if="spotify_enabled" to="/music/spotify">
+            <navbar-item-link
+              v-if="spotify_enabled"
+              :to="{ path: '/music/spotify' }"
+            >
               <span class="pl-5" v-text="$t('navigation.spotify')" />
             </navbar-item-link>
-            <navbar-item-link to="/podcasts">
+            <navbar-item-link :to="{ path: '/podcasts' }">
               <mdicon class="icon" name="microphone" size="16" />
               <b v-text="$t('navigation.podcasts')" />
             </navbar-item-link>
-            <navbar-item-link to="/audiobooks">
+            <navbar-item-link :to="{ path: '/audiobooks' }">
               <mdicon class="icon" name="book-open-variant" size="16" />
               <b v-text="$t('navigation.audiobooks')" />
             </navbar-item-link>
-            <navbar-item-link to="/radio">
+            <navbar-item-link :to="{ path: '/radio' }">
               <mdicon class="icon" name="radio" size="16" />
               <b v-text="$t('navigation.radio')" />
             </navbar-item-link>
-            <navbar-item-link to="/files">
+            <navbar-item-link :to="{ path: '/files' }">
               <mdicon class="icon" name="folder-open" size="16" />
               <b v-text="$t('navigation.files')" />
             </navbar-item-link>
-            <navbar-item-link to="/search">
+            <navbar-item-link :to="{ path: '/search' }">
               <mdicon class="icon" name="magnify" size="16" />
               <b v-text="$t('navigation.search')" />
             </navbar-item-link>
             <hr class="my-3" />
-            <navbar-item-link to="/settings/webinterface">{{
+            <navbar-item-link :to="{ path: '/settings/webinterface' }">{{
               $t('navigation.settings')
             }}</navbar-item-link>
             <a
@@ -103,7 +112,7 @@
               @click.stop.prevent="open_update_dialog()"
               v-text="$t('navigation.update-library')"
             />
-            <navbar-item-link to="/about">{{
+            <navbar-item-link :to="{ name: 'about' }">{{
               $t('navigation.about')
             }}</navbar-item-link>
             <div class="navbar-item is-hidden-desktop" />

web-src/src/router/index.js

@@ -1,6 +1,6 @@
 import * as types from '@/store/mutation_types'
 import { createRouter, createWebHashHistory } from 'vue-router'
-import store from '@/store'
+import PageAbout from '@/pages/PageAbout.vue'
 import PageAudiobooksAlbum from '@/pages/PageAudiobooksAlbum.vue'
 import PageAudiobooksAlbums from '@/pages/PageAudiobooksAlbums.vue'
 import PageQueue from '@/pages/PageQueue.vue'
@@ -28,7 +28,6 @@ import PagePlaylist from '@/pages/PagePlaylist.vue'
 import PageFiles from '@/pages/PageFiles.vue'
 import PageRadioStreams from '@/pages/PageRadioStreams.vue'
 import PageSearch from '@/pages/PageSearch.vue'
-import PageAbout from '@/pages/PageAbout.vue'
 import SpotifyPageBrowse from '@/pages/SpotifyPageBrowse.vue'
 import SpotifyPageBrowseNewReleases from '@/pages/SpotifyPageBrowseNewReleases.vue'
 import SpotifyPageBrowseFeaturedPlaylists from '@/pages/SpotifyPageBrowseFeaturedPlaylists.vue'
@@ -40,20 +39,21 @@ import SettingsPageWebinterface from '@/pages/SettingsPageWebinterface.vue'
 import SettingsPageArtwork from '@/pages/SettingsPageArtwork.vue'
 import SettingsPageOnlineServices from '@/pages/SettingsPageOnlineServices.vue'
 import SettingsPageRemotesOutputs from '@/pages/SettingsPageRemotesOutputs.vue'
+import store from '@/store'
 
 export const router = createRouter({
   history: createWebHashHistory(),
   routes: [
+    {
+      component: PageAbout,
+      name: 'about',
+      path: '/about'
+    },
     {
       path: '/',
       name: 'PageQueue',
       component: PageQueue
     },
-    {
-      path: '/about',
-      name: 'About',
-      component: PageAbout
-    },
     {
       component: PageAudiobooksAlbum,
       meta: { show_progress: true },