Client side routing

Author: ferrywlto

ClientApp/app.js

@@ -1,7 +1,10 @@
 import Vue from 'vue';
 import App from './components/App.vue';
 import store from './vuex/store.js';
+import router from './router';
+
 const app = new Vue({
+    router,
     store,
     ...App //... is spread operator if App is Array; is rest(remaining) properties if App is Object
 });

ClientApp/components/App.vue

@@ -1,21 +1,9 @@
-
-<script>
-import { mapGetters, mapActions } from 'vuex';
-import Message from './Message.vue';
-export default {
-    components: { Message },
-    computed: mapGetters(['messages', 'lastFetchedMessageDate']),
-    methods: mapActions(['fetchMessages']),
-    created () {
-        return this.$store.dispatch('fetchInitialMessages')
-    }
-}
-</script>
-
 <template>
     <div>
         <h1>Hello from Vue#!!!#</h1>
-        <Message v-for="(msg, index) in messages" :message="msg" :key="index" />
-        <button @click="fetchMessages(lastFetchedMessageDate)">Fetch a message</button>
+        <router-link to="/">Dashboard</router-link>
+        <router-link to="/messages">Message</router-link>
+
+        <router-view></router-view>
     </div>
 </template>

ClientApp/components/Dashboard.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>Dashboard</h1>
+</template>

ClientApp/components/Messages.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <Message v-for="(msg, index) in messages" :message="msg" :key="index" />
+        <button @click="fetchMessages(lastFetchedMessageDate)">Fetch a message</button>
+    </div>
+</template>
+
+<script>
+import {mapGetters, mapActions} from 'vuex';
+import Message from './Message.vue';
+export default {
+  components: { Message },
+  computed: mapGetters(['messages', 'lastFetchedMessageDate']),
+  methods: mapActions(['fetchMessages']),
+  created(){
+      return this.$store.dispatch('fetchInitialMessages');
+  }
+}
+</script>

ClientApp/router/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+import Dashboard from '../components/Dashboard.vue';
+import Messages from '../components/Messages.vue';
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+    mode: 'history',
+    routes: [
+        { path: '/', component: Dashboard },
+        { path: '/messages', component: Messages }
+    ]
+});
+
+export default router;

README.md

@@ -3,8 +3,8 @@ This repository is a clone from Stu Ratcliffe [Server rendering Vue.js applicati
 Following his articile and trying to have some write up. (e.g. using latest packages in package.json)
 
 ## Packages used:
-- lodash <- similiar to numpy in Python
-- axios <- Promise based HTTP client for the browser and Node.js
+- lodash <- similiar to numpy in Python, utilies library for manipulating array/object.
+- axios <- Promise based HTTP client for the browser and Node.js, think of $.ajax() if you come from jQuery world
 - vuex <- Vue variant of Flux implementation, just like Redux in React
 ### Working with data:
 - .Net part
@@ -14,4 +14,16 @@ Following his articile and trying to have some write up. (e.g. using latest pack
 - Vue part
     0. (create ClientApp/vuex folder)
     1. ClientApp/vuex/action.js
-    2. ClientApp/vuex/store.js
+    2. ClientApp/vuex/store.js
+### Client side routing:
+0. Move to ClientApp/components
+1. Dashboard.vue
+2. Messages.vue
+3. Modify App.vue
+4. create ClientApp/router folder
+5. Move to ClientApp/router
+6. index.js
+7. Move back to ClientApp folder
+8. Modify app.js
+9. Move back to .
+10. Modify Startup.cs

Startup.cs

@@ -46,6 +46,7 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerF
 
             app.UseMvc(routes =>
             {
+                routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index"});
                 routes.MapRoute(
                     name: "default",
                     template: "{controller=Home}/{action=Index}/{id?}");

package.before_client_side_routing.json

@@ -0,0 +1,30 @@
+{
+  "name": "vdn",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Ferry To",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "vue": "^2.5.8",
+    "vuex": "^3.0.1",
+    "lodash": "^4.17.4",
+    "axios": "^0.17.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "vue-loader": "^13.5.0",
+    "vue-template-compiler": "^2.5.8",
+    "css-loader": "^0.28.7",
+    "aspnet-webpack": "^2.0.1",
+    "webpack": "^3.8.1",
+    "webpack-hot-middleware": "^2.20.0"
+  }
+}

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "vue": "^2.5.8",
     "vuex": "^3.0.1",
+    "vue-router": "^3.0.1",
     "lodash": "^4.17.4",
     "axios": "^0.17.1"
   },