[web] Use named route for settings

Switching to named routes in order to reduce future maintenance.

web-src/src/components/NavbarTop.vue

@@ -101,7 +101,7 @@
               <b v-text="$t('navigation.search')" />
             </navbar-item-link>
             <hr class="my-3" />
-            <navbar-item-link :to="{ path: '/settings/webinterface' }">{{
+            <navbar-item-link :to="{ name: 'settings-webinterface' }">{{
               $t('navigation.settings')
             }}</navbar-item-link>
             <a

web-src/src/components/TabsSettings.vue

@@ -7,7 +7,7 @@
             <ul>
               <router-link
                 v-slot="{ navigate, isActive }"
-                to="/settings/webinterface"
+                :to="{ name: 'settings-webinterface' }"
                 custom
               >
                 <li :class="{ 'is-active': isActive }">
@@ -18,7 +18,7 @@
               </router-link>
               <router-link
                 v-slot="{ navigate, isActive }"
-                to="/settings/remotes-outputs"
+                :to="{ name: 'settings-remotes-outputs' }"
                 custom
               >
                 <li :class="{ 'is-active': isActive }">
@@ -31,7 +31,7 @@
               </router-link>
               <router-link
                 v-slot="{ navigate, isActive }"
-                to="/settings/artwork"
+                :to="{ name: 'settings-artwork' }"
                 custom
               >
                 <li :class="{ 'is-active': isActive }">
@@ -42,7 +42,7 @@
               </router-link>
               <router-link
                 v-slot="{ navigate, isActive }"
-                to="/settings/online-services"
+                :to="{ name: 'settings-online-services' }"
                 custom
               >
                 <li :class="{ 'is-active': isActive }">

web-src/src/pages/PageSettingsArtwork.vue

@@ -55,11 +55,11 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import TabsSettings from '@/components/TabsSettings.vue'
 import SettingsCheckbox from '@/components/SettingsCheckbox.vue'
+import TabsSettings from '@/components/TabsSettings.vue'
 
 export default {
-  name: 'SettingsPageArtwork',
+  name: 'PageSettingsArtwork',
   components: { ContentWithHeading, TabsSettings, SettingsCheckbox },
 
   computed: {

web-src/src/pages/PageSettingsOnlineServices.vue

@@ -134,7 +134,7 @@ import TabsSettings from '@/components/TabsSettings.vue'
 import webapi from '@/webapi'
 
 export default {
-  name: 'SettingsPageOnlineServices',
+  name: 'PageSettingsOnlineServices',
   components: { ContentWithHeading, TabsSettings },
 
   filters: {

web-src/src/pages/PageSettingsRemotesOutputs.vue

@@ -98,7 +98,7 @@ import TabsSettings from '@/components/TabsSettings.vue'
 import webapi from '@/webapi'
 
 export default {
-  name: 'SettingsPageRemotesOutputs',
+  name: 'PageSettingsRemotesOutputs',
   components: { ContentWithHeading, TabsSettings },
 
   filters: {},

web-src/src/pages/PageSettingsWebinterface.vue

@@ -186,7 +186,7 @@ import SettingsTextfield from '@/components/SettingsTextfield.vue'
 import TabsSettings from '@/components/TabsSettings.vue'
 
 export default {
-  name: 'SettingsPageWebinterface',
+  name: 'PageSettingsWebinterface',
   components: {
     ContentWithHeading,
     ControlDropdown,

web-src/src/router/index.js

@@ -21,6 +21,10 @@ import PagePodcast from '@/pages/PagePodcast.vue'
 import PagePodcasts from '@/pages/PagePodcasts.vue'
 import PageNowPlaying from '@/pages/PageNowPlaying.vue'
 import PageQueue from '@/pages/PageQueue.vue'
+import PageSettingsWebinterface from '@/pages/PageSettingsWebinterface.vue'
+import PageSettingsArtwork from '@/pages/PageSettingsArtwork.vue'
+import PageSettingsOnlineServices from '@/pages/PageSettingsOnlineServices.vue'
+import PageSettingsRemotesOutputs from '@/pages/PageSettingsRemotesOutputs.vue'
 import PageBrowse from '@/pages/PageBrowse.vue'
 import PageBrowseRecentlyAdded from '@/pages/PageBrowseRecentlyAdded.vue'
 import PageBrowseRecentlyPlayed from '@/pages/PageBrowseRecentlyPlayed.vue'
@@ -35,10 +39,7 @@ import SpotifyPageBrowseNewReleases from '@/pages/SpotifyPageBrowseNewReleases.v
 import SpotifyPageBrowseFeaturedPlaylists from '@/pages/SpotifyPageBrowseFeaturedPlaylists.vue'
 import SpotifyPageArtist from '@/pages/SpotifyPageArtist.vue'
 import SpotifyPageAlbum from '@/pages/SpotifyPageAlbum.vue'
-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({
@@ -237,6 +238,26 @@ export const router = createRouter({
       name: 'search-spotify',
       path: '/search/spotify'
     },
+    {
+      component: PageSettingsWebinterface,
+      name: 'settings-webinterface',
+      path: '/settings/webinterface'
+    },
+    {
+      component: PageSettingsArtwork,
+      name: 'settings-artwork',
+      path: '/settings/artwork'
+    },
+    {
+      component: PageSettingsOnlineServices,
+      name: 'settings-online-services',
+      path: '/settings/online-services'
+    },
+    {
+      component: PageSettingsRemotesOutputs,
+      name: 'settings-remotes-outputs',
+      path: '/settings/remotes-outputs'
+    },
     {
       path: '/music/spotify',
       name: 'Spotify',
@@ -266,26 +287,6 @@ export const router = createRouter({
       name: 'Spotify Album',
       component: SpotifyPageAlbum,
       meta: { show_progress: true }
-    },
-    {
-      path: '/settings/webinterface',
-      name: 'Settings Webinterface',
-      component: SettingsPageWebinterface
-    },
-    {
-      path: '/settings/artwork',
-      name: 'Settings Artwork',
-      component: SettingsPageArtwork
-    },
-    {
-      path: '/settings/online-services',
-      name: 'Settings Online Services',
-      component: SettingsPageOnlineServices
-    },
-    {
-      path: '/settings/remotes-outputs',
-      name: 'Settings Remotes Outputs',
-      component: SettingsPageRemotesOutputs
     }
   ],
   scrollBehavior(to, from, savedPosition) {