All demos added

src/layout/AppMenuItem.vue

@@ -27,11 +27,11 @@ defineProps({
             <span class="layout-menuitem-text">{{ item.label }}</span>
             <i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
         </a>
-        <a v-if="item.to && !item.items && item.visible !== false" @click="itemClick($event)" :class="item.class" tabindex="0" :to="item.to">
+        <router-link v-if="item.to && !item.items && item.visible !== false" @click="itemClick($event)" :class="[item.class, { 'active-route': active }]" tabindex="0" :to="item.to">
             <i :class="item.icon" class="layout-menuitem-icon"></i>
             <span class="layout-menuitem-text">{{ item.label }}</span>
             <i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
-        </a>
+        </router-link>
         <Transition class="layout-submenu">
             <ul v-if="item.items && item.visible !== false">
                 <app-menu-item v-for="(child, i) in item.items" :key="child" :index="i" :item="child" :root="false"></app-menu-item>

src/layout/service/NodeService.js

@@ -1,11 +1,13 @@
 export default class NodeService {
-
-    getTreeTableNodes() {
-        return fetch('data/treetablenodes.json').then(res => res.json()).then(d => d.root);
+    getTreeTableNodes () {
+        return fetch('/data/treetablenodes.json')
+            .then(res => res.json())
+            .then(d => d.root);
     }
 
-    getTreeNodes() {
-        return fetch('data/treenodes.json').then(res => res.json()).then(d => d.root);
+    getTreeNodes () {
+        return fetch('/data/treenodes.json')
+            .then(res => res.json())
+            .then(d => d.root);
     }
-    
 }

src/layout/service/PhotoService.js

@@ -1,7 +1,7 @@
 export default class PhotoService {
-
-    getImages() {
-        return fetch('data/photos.json').then(res => res.json())
-                .then(d => d.data);
+    getImages () {
+        return fetch('/data/photos.json')
+            .then(res => res.json())
+            .then(d => d.data);
     }
 }

src/layout/service/ProductService.js

@@ -1,15 +1,19 @@
 export default class ProductService {
-
-    getProductsSmall() {
-		return fetch('data/products-small.json').then(res => res.json()).then(d => d.data);
-	}
-
-	getProducts() {
-		return fetch('data/products.json').then(res => res.json()).then(d => d.data);
+    getProductsSmall () {
+        return fetch('/data/products-small.json')
+            .then(res => res.json())
+            .then(d => d.data);
     }
 
-    getProductsWithOrdersSmall() {
-		return fetch('data/products-orders-small.json').then(res => res.json()).then(d => d.data);
-	}
-	
-}
+    getProducts () {
+        return fetch('/data/products.json')
+            .then(res => res.json())
+            .then(d => d.data);
+    }
+
+    getProductsWithOrdersSmall () {
+        return fetch('/data/products-orders-small.json')
+            .then(res => res.json())
+            .then(d => d.data);
+    }
+}