reordered for custom views

src/app.vue

@@ -17,16 +17,9 @@ export default {
     components: {
         Navigation
     },
-    props: {
-        navigationItems: {
-            type: Array,
-            default() {
-                return [ ];
-            }
-        }
-    },
     data() {
         return {
+            navigationItems: this.$store.state.navigation
         }
     },
     created() {

src/main.js

@@ -5,37 +5,12 @@ import Axios from 'axios';
 import JwtDecode from 'jwt-decode';
 
 import App from './app.vue';
-import Dashboard from './components/dashboard.vue';
-import LoginForm from './components/forms/login.vue';
-import Logout from './components/logout.vue';
-import Userlist from './components/userlist.vue';
+import Views from './views/views.js';
 
 Vue.use(VueRouter);
 Vue.use(Vuex);
 
-
-const routes = [
-  {
-    path: '/login',
-    component: LoginForm
-  },
-  {
-    path: '/',
-    component: Dashboard
-  },
-  {
-    path: '/userlist',
-    component: Userlist
-  },
-  {
-    path: '/logout',
-    component: Logout
-  }
-];
-
-const router = new VueRouter({
-  routes
-});
+const router = new VueRouter();
 
 const store = new Vuex.Store({
   state: {
@@ -202,20 +177,36 @@ Axios.get('conf/init.json')
       alert('invalid data in init.json');
       return;
     }
-    store.commit("setNavigation", results.data.navigation);
+    let navigation = [];
+    results.data.navigation.forEach(({name, to}) => navigation.push({name, to}));
+      
+    store.commit("setNavigation", navigation);
 
     // set api config in store
     store.commit("setAPI", results.data.api);
 
+    // add routes
+    let routes = [];
+    let rIdx = 0;
+    results.data.navigation.forEach(({to, content, data}) => routes.push({
+      path: to,
+      component: Vue.component('main' + rIdx++, {
+        template: '<div id="main'+ rIdx + '">' + content + '</div>',
+        components: Views,
+        data() {
+          if (typeof data != 'object') {
+            return {};
+          }
+          return data;
+        }
+      })
+    }));
+    router.addRoutes(routes);
+
     // load app, when init finishs
     new Vue({
       el: '#vue-app',
-      components: {
-        App
-      },
-      data: {
-        navItems: store.state.navigation
-      },
+      render: h => h(App),
       router,
       store
     });

src/views/forms/login.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import MyForm from '../my-form.vue';
+import MyForm from '../../components/my-form.vue';
 
 export default {
   name: 'LoginForm',

src/views/lists/userlist.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import ScrollTable from './scroll-table.vue';
+import ScrollTable from '../../components/scroll-table.vue';
 
 export default {
     name: "Userlist",

src/views/views.js

@@ -0,0 +1,11 @@
+import Dashboard from './dashboard.vue';
+import LoginForm from './forms/login.vue';
+import Logout from './forms/logout.vue';
+import Userlist from './lists/userlist.vue';
+
+export default {
+    Dashboard,
+    LoginForm,
+    Logout,
+    Userlist
+}