nested routing seems to work :-)

.gitignore

@@ -267,4 +267,5 @@ wwwroot/Media/
 Temp/
 **/Assets/app.*
 **/Assets/setup.*
+**/Assets/*.js
 deps/*.dll

zero.Web/App/app.vue

@@ -17,7 +17,7 @@
   import AppNavigation from 'zero/navigation.vue'
   import AppLogin from 'zeropages/login/login.vue'
   import AppOverlays from 'zerocomponents/overlays/overlay-holder.vue'
-  import Router from 'zero/app.router.js'
+  import Router from 'zero/router.config.js'
   import AuthApi from 'zeroservices/auth.js'
   import 'zero/axios.config.js'
 

zero.Web/App/axios.config.js

@@ -1,12 +1,12 @@
 import Axios from 'axios';
 import Auth from 'zeroservices/auth';
 
-if (!zero || !zero.path)
+if (!zero || !zero.apiPath)
 {
-  throw Exception('window.zero and zero.path (= base path) have to be configured');
+  throw Exception('window.zero and zero.apiPath (= base path to the backoffice API) have to be configured');
 }
 
-Axios.defaults.baseURL = zero.path + 'api/';
+Axios.defaults.baseURL = zero.apiPath;
 Axios.defaults.withCredentials = true;
 
 Axios.interceptors.response.use(response => response, error =>

zero.Web/App/pages/pages/page.vue

@@ -1,48 +1,26 @@
 <template>
-  <div class="page-container">
-    <div class="page-container-tree" v-resizable="resizable">
-      <ui-header-bar title="Pages">
-        <ui-dot-button />
-      </ui-header-bar>
-      <ui-tree :get="getItems" />
-      <div class="page-container-tree-resizable ui-resizable"></div>
-    </div>
-    <div>
-      <ui-header-bar title="Checkout" :on-back="onBack">
-        <ui-dropdown>
-          <template v-slot:button>
-            <ui-button type="light" label="Actions" caret="down" />
-          </template>
-          <ui-dropdown-list :items="actions" :action="actionSelected" />
-        </ui-dropdown>
-        <ui-button type="light" label="Preview" icon="fth-eye" />
-        <ui-button label="Save" />
-      </ui-header-bar>
-    </div>
+  <div class="page">
+    <ui-header-bar title="Checkout" :on-back="onBack">
+      <ui-dropdown>
+        <template v-slot:button>
+          <ui-button type="light" label="Actions" caret="down" />
+        </template>
+        <ui-dropdown-list :items="actions" :action="actionSelected" />
+      </ui-dropdown>
+      <ui-button type="light" label="Preview" icon="fth-eye" />
+      <ui-button label="Save" />
+    </ui-header-bar>
   </div>
 </template>
 
 
 <script>
-  import PageTreeApi from 'zeroresources/page-tree.js'
-
   export default {
-    name: 'app-page',
 
     data: () => ({
-      page: true,
-      cache: {},
-      resizable: {
-        axis: 'x',
-        min: 260,
-        max: 520,
-        save: 'page-tree',
-        handle: '.ui-resizable'
-      },
       actions: []
     }),
 
-
     created()
     {
       this.actions.push({
@@ -78,22 +56,6 @@
 
     methods: {
 
-      getItems(parent)
-      {
-        const key = !parent ? '__root' : parent;
-
-        if (this.cache[key])
-        {
-          return Promise.resolve(this.cache[key]);
-        }
-
-        return PageTreeApi.getChildren(parent).then(response =>
-        {
-          this.cache[key] = response;
-          return response;
-        });
-      },
-
       actionSelected(item, dropdown)
       {
         dropdown.hide();
@@ -106,55 +68,4 @@
 
     }
   }
-</script>
-
-
-<style lang="scss">
-  .page-container
-  {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-gap: 2px;
-    justify-content: stretch;
-    height: 100vh;
-  }
-
-  .page-container-tree
-  {
-    width: 340px;
-    background: var(--color-bg-light);
-    padding: 0;
-    position: relative;
-    overflow-y: auto;
-    height: 100vh;
-
-    .ui-header-bar + .ui-tree
-    {
-      margin-top: 2px;
-    }
-
-    .ui-dot-button
-    {
-      margin-right: -8px;
-    }
-  }
-
-  .page-container-tree-resizable
-  {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    background: var(--color-fg);
-    opacity: 0;
-    right: 0;
-    width: 6px;
-    cursor: ew-resize;
-    transition: opacity 0.15s ease 0s;
-
-    &:hover
-    {
-      transition-delay: 0.2s;
-      opacity: 0.04;
-    }
-  }
-</style>
+</script>

zero.Web/App/pages/pages/pages.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="page-container">
+    <div class="page-container-tree" v-resizable="resizable">
+      <ui-header-bar title="Pages">
+        <ui-dot-button />
+      </ui-header-bar>
+      <ui-tree :get="getItems" />
+      <ui-button type="white" label="Go to page" @click="goToPage" icon="fth-settings" />
+      <div class="page-container-tree-resizable ui-resizable"></div>
+    </div>
+    <router-view></router-view>
+  </div>
+</template>
+
+
+<script>
+  import PageTreeApi from 'zeroresources/page-tree.js'
+
+  export default {
+
+    data: () => ({
+      page: true,
+      cache: {},
+      resizable: {
+        axis: 'x',
+        min: 260,
+        max: 520,
+        save: 'page-tree',
+        handle: '.ui-resizable'
+      }
+    }),
+
+
+    methods: {
+
+      goToPage()
+      {
+        this.$router.push({ name: 'page', params: { page: '23' } });
+      },
+
+      getItems(parent)
+      {
+        const key = !parent ? '__root' : parent;
+
+        if (this.cache[key])
+        {
+          return Promise.resolve(this.cache[key]);
+        }
+
+        return PageTreeApi.getChildren(parent).then(response =>
+        {
+          this.cache[key] = response;
+          return response;
+        });
+      }
+    }
+  }
+</script>
+
+
+<style lang="scss">
+  .page-container
+  {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 2px;
+    justify-content: stretch;
+    height: 100vh;
+  }
+
+  .page-container-tree
+  {
+    width: 340px;
+    background: var(--color-bg-light);
+    padding: 0;
+    position: relative;
+    overflow-y: auto;
+    height: 100vh;
+
+    .ui-header-bar + .ui-tree
+    {
+      margin-top: 2px;
+    }
+
+    .ui-dot-button
+    {
+      margin-right: -8px;
+    }
+  }
+
+  .page-container-tree-resizable
+  {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background: var(--color-fg);
+    opacity: 0;
+    right: 0;
+    width: 6px;
+    cursor: ew-resize;
+    transition: opacity 0.15s ease 0s;
+
+    &:hover
+    {
+      transition-delay: 0.2s;
+      opacity: 0.04;
+    }
+  }
+</style>

zero.Web/App/pages/settings/settings.vue

@@ -15,6 +15,7 @@
         </router-link>
       </div>
     </div>
+    <router-view name="footer"></router-view>
   </div>
 </template>
 

zero.Web/App/router.config.js

@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Localization from 'zeroservices/localization';
-import ViewDefault from 'zeropages/pages/page';
 
 Vue.use(VueRouter);
 
@@ -13,18 +12,45 @@ const routes = [];
 
 let addSection = (section, component) =>
 {
-  routes.push({
-    path: section.url,
+  let route = {
+    path: section.url,    
     component: component,
     meta: {
       section: section
     }
-  });
+  };
+
+  //if (section.alias != 'pages')
+  //{
+  //  route.component = component;
+  //}
+  //else
+  //{
+  //  route.components = {
+  //    default: component,
+  //    footer: () => import('zeropages/' + section.alias + '/user')
+  //  };
+  //}
+
+  routes.push(route);
+
+  return route;
 };
 
 zero.sections.forEach(section =>
 {
-  addSection(section, () => import('zeropages/' + section.alias + '/' + section.alias));
+  let route = addSection(section, () => import('zeropages/' + section.alias + '/' + section.alias));
+
+  if (section.alias === 'pages')
+  {
+    route.children = [{
+      path: ':page',
+      props: true,
+      name: 'page',
+      component: () => import('zeropages/' + section.alias + '/page')
+    }];
+
+  }
 
   if (section.children.length > 0)
   {
@@ -35,11 +61,13 @@ zero.sections.forEach(section =>
   }
 });
 
+console.table(routes);
+
 
 
 // add fallback route (this should probably by 404 page)
 
-routes.push({ path: '*', component: ViewDefault });
+//routes.push({ path: '*', component: ViewDefault });
 
 
 

zero.Web/ZeroVue.cs

@@ -42,6 +42,7 @@ namespace zero.Web
       ZeroVueConfig config = new ZeroVueConfig();
 
       config.Path = Options.BackofficePath.EnsureEndsWith('/');
+      config.ApiPath = config.Path + "api/";
       config.Sections = CreateSections();
       config.Translations = CreateTranslations();
       config.Applications = await CreateApplications();
@@ -137,6 +138,8 @@ namespace zero.Web
   {
     public string Path { get; set; }
 
+    public string ApiPath { get; set; }
+
     public IList<ZeroVueSection> Sections { get; set; } = new List<ZeroVueSection>();
 
     public IList<ZeroVueApplication> Applications { get; set; } = new List<ZeroVueApplication>();