Added vue-router

package.json

@@ -6,11 +6,11 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "build:clean":  "rm ./public_html/js/bundle@*.js*",
+    "build:clean": "rm ./public_html/js/bundle@*.js*",
     "build:bundle": "cross-env NODE_ENV=production webpack --progress --hide-modules",
-    "build:dev":    "cross-env NODE_ENV=development webpack --progress --hide-modules",
+    "build:dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
-    "dev":          "npm run build:clean; npm run build:dev",
+    "dev": "npm run build:clean; npm run build:dev",
-    "build":        "npm run build:clean; npm run build:bundle"
+    "build": "npm run build:clean; npm run build:bundle"
   },
   "dependencies": {
     "vue": "^2.5.9"
@@ -30,6 +30,7 @@
     "file-loader": "^1.1.4",
     "vue-loader": "^13.0.5",
     "vue-template-compiler": "^2.5.9",
+    "vue-router": "^2.5.3",
     "webpack": "^3.8.1",
     "webpack-dev-server": "^2.9.5"
   }

view/main.js

@@ -2,11 +2,13 @@
 ---------------------------------------------------------*/
 /* (1) NPM libs */
 import Vue from 'vue'
+import VueRouter from 'vue-router'
 
 /* (2) Internal libs */
-import {API} from './lib/api-es6'
+import {API}                      from './lib/api-es6'
-import {InfoBox} from './lib/infobox-es6'
+import {InfoBox}                  from './lib/infobox-es6'
 import {WSClient,WSClientBuilder} from './lib/ws-client-es6'
+import routes                     from './routes'
 
 /* (3) Vues */
 import wrapper_vue from './vue/wrapper.vue'
@@ -25,13 +27,18 @@ require('./vue-config');
 window.gstore.add('server', window._SERVER);
 window.infobox = new InfoBox(window.gstore.data.info);
 
-/* (4) Render view */
+/* (4) Init vue router */
+Vue.use(VueRouter);
+window.router = new VueRouter({
+	mode: 'history',
+	routes: routes[0]
+});
+
+/* (5) Render view */
 new Vue({
 	el:     '#main-vue',
-	render: h => h(wrapper_vue),
+	router: window.router,
-	data: {
+	render: h => h(wrapper_vue)
-	  gstore: window.gstore.data
-	}
 })
 
 

view/routes.js

@@ -0,0 +1,19 @@
+export default { 0: [
+
+	{
+		path: '/dashboard/',
+		component: require('./vue/container/dashboard.vue')
+	}, {
+		path: '/profile/',
+		component: require('./vue/container/profile.vue')
+	}, {
+		path: '/message/',
+		component: require('./vue/container/message.vue')
+	}, {
+		path: '/notifications/',
+		component: require('./vue/container/notifications.vue')
+	}, {
+		path: '*',
+		redirect: '/dashboard/'
+	}
+]}

view/vue/wrapper.vue

@@ -8,10 +8,7 @@
 		<menu-comp></menu-comp>
 
 		<!-- Container -->
-		<dashboard-container     v-show="gstore.menu_item_active == 'dashboard'"     ></dashboard-container>
+		<router-view></router-view>
-		<profile-container       v-show="gstore.menu_item_active == 'profile'"       ></profile-container>
-		<message-container       v-show="gstore.menu_item_active == 'inbox'"         ></message-container>
-		<notifications-container v-show="gstore.menu_item_active == 'notifications'" ></notifications-container>
 
 	</div>
 </template>
@@ -25,24 +22,14 @@
 import header_vue           from './header.vue';
 import menu_vue             from './menu.vue';
 
-import dashboardContainer_vue     from './container/dashboard.vue';
-import profileContainer_vue       from './container/profile.vue';
-import messageContainer_vue       from './container/message.vue';
-import notificationsContainer_vue from './container/notifications.vue';
-
-
 export default {
 	name: 'wrapper',
 	data(){ return {
 		gstore: window.gstore.data
 	}; },
 	components: {
-		'HeaderComp':             header_vue,
+		'HeaderComp': header_vue,
-		'MenuComp':               menu_vue,
+		'MenuComp':   menu_vue
-		'DashboardContainer':     dashboardContainer_vue,
-		'ProfileContainer':       profileContainer_vue,
-		'MessageContainer':       messageContainer_vue,
-		'NotificationsContainer': notificationsContainer_vue
 	}
 }
 </script>