Added router to application

package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "bulma": "^0.6.1",
     "express": "^4.16.2",
-    "vue": "^2.5.6"
+    "vue": "^2.5.6",
+    "vue-router": "^3.0.1"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",

src/app.js

@@ -1,7 +1,9 @@
 import Vue from 'vue'
 import AppLayout from './theme/Layout.vue'
+import router from './router'
 
 const app = new Vue({
+  router,
   // render is a Vuejs function that will return an elements
   // This is equivalent to template: '<app></app>'
   render: h => h(AppLayout)
@@ -10,4 +12,4 @@ const app = new Vue({
   // ...AppLayout //this part didn't work. I don't know why but
 })
 
-export { app }
+export { app, router }

src/router.js

@@ -0,0 +1,50 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Category from './theme/Category.vue'
+import Login from './theme/Login.vue'
+import NotFound from './theme/NotFound.vue'
+
+// Here we are breaking these up into Async components because if you are only
+// visiting one site you don't need all the other components loaded
+// WE ARE REVERTING THIS BECAUSE IT IS GREAT FOR CLIENT SIDE rendering
+// BUT WE ARE GOING TO DO "SERVER SIDE RENDERING" BY THE END OF THIS
+// const Category = () => System.import('./theme/Category.vue')
+// const Login = () => System.import('./theme/Login.vue')
+// const NotFound = () => System.import('./theme/NotFound.vue')
+
+Vue.use(VueRouter)
+
+const router = new VueRouter({
+  // We can use the history API in modern Browsers to avoid seeing # in the urlParams
+  mode: 'history',
+  // We can change the default router-link-active class for active routes to
+  // a class that our CSS library can use
+  linkActiveClass: 'is-active',
+  // Scroll Behavior is essentionally a method that accepts to path, from path
+  // and the scroll position that the page was in
+  // Here we are seeting the y position to 0 so that we scroll to the top of the page
+  scrollBehavior: (to, from, savedPosition) => ({ y: 0 }),
+  // In the routes array we can link Routes with Components
+  routes: [
+    {
+      path: '/category/:id', // Here we are going to use dynamic routing
+      name: 'category', // this is a naming of the rule it allows us to pass json objects into the router-link to attribute
+      component: Category
+    },
+    {
+      path: '/login',
+      component: Login
+    },
+    {
+      path: '/',
+      redirect: '/category/front-end'
+    },
+    {
+      path: '*',
+      component: NotFound
+    }
+  ]
+}
+)
+
+export default router

src/theme/AppHeader.vue

@@ -1,10 +1,23 @@
 <template>
   <nav class="navbar has-shadow">
-    <div class="container">
+    <div class="navbar-brand">
-      <a href="/">
+      <router-link to="/" exact>
         <img src="http://bit.ly/vue-img"
           alt="Vue SPA" />
-      </a>
+      </router-link>
+        <div class='tabs'>
+          <ul>
+              <router-link to="/category/front-end" tag="li">
+                <a href="#">Front-end</a>
+              </router-link>
+              <router-link :to="{ name: 'category', params: {id: 'mobile'}}" tag="li">
+                <a href="#">Mobile</a>
+              </router-link>
+              <router-link to="/login" tag="li">
+                <a href="#">Login</a>
+              </router-link>
+          </ul>
+        </div>
     </div>
   </nav>
 </template>

src/theme/Category.vue

@@ -18,15 +18,42 @@
     // whey are we doing it like this?
     data () {
       return {
-        posts: [
+        // Vuejs exposes the router through the $route object. With this you can
+        // actually use the object to navigate by doing something like this.$route.push('/')
+        // or obtain data like we are below
+        id: this.$route.params.id,
+        postsFrontEnd: [
           { id: 1, title: 'PWA Stats', content: 'A community-driven list of stats and news related to Progressive Web Apps', link: 'https://www.pwastats.com/' },
           { id: 2, title: 'A Comprehensive Guide To HTTP/2 Server Push', content: 'No longer is HTTP/2 a feature we pine for. It has arrived, and with it comes server push!', link: 'https://www.smashingmagazine.com/2017/04/guide-http2-server-push/' },
-          { id: 3, title: 'So what’s this GraphQL thing I keep hearing about?', content: 'Why now is the perfect time to learn what exactly this GraphQL thing you keep hearing about really is.', link: 'https://medium.freecodecamp.com/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf' },
+          { id: 3, title: 'So what’s this GraphQL thing I keep hearing about?', content: 'Why now is the perfect time to learn what exactly this GraphQL thing you keep hearing about really is.', link: 'https://medium.freecodecamp.com/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf' }
+        ],
+        postsMobile: [
           { id: 4, title: 'State of The Mobile Gap Between Native and Web', content: 'Clearly PhoneGap, and Cordova are still required today in the mobile world, but when is it really needed? Did the web ever catch up?', link: 'https://remysharp.com/2016/05/28/state-of-the-gap' },
           { id: 5, title: 'Learning JavaScript Design Patterns', content: 'Design patterns are reusable solutions to commonly occurring problems in software design.', link: 'https://addyosmani.com/resources/essentialjsdesignpatterns/book/' },
           { id: 6, title: 'The Power of Custom Directives in Vue', content: 'The beautiful thing about Vue is that it\'s incredibly feature-rich.', link: 'https://css-tricks.com/power-custom-directives-vue/' }
-        ]
+        ],
+        posts: []
       }
+    },
+    methods: {
+      loadPosts () {
+        if (this.id === 'front-end') {
+          this.posts = this.postsFrontEnd
+        } else {
+          this.posts = this.postsMobile
+        }
+      }
+    },
+    watch: {
+      '$route' (to, from) {
+        this.id = to.params.id
+        this.loadPosts()
+      }
+    },
+    created () {
+      this.loadPosts()
+      console.log(this.$route.query.page) // This is to show you how easy it is to access the ?page= query param.
     }
+
   }
 </script>

src/theme/Layout.vue

@@ -3,7 +3,7 @@
     <app-header></app-header>
     <section class="main-section section">
       <div class="container content">
-        <category></category>
+        <router-view></router-view>
       </div>
     </section>
     <app-footer></app-footer>
@@ -12,12 +12,11 @@
 <script>
   import AppHeader from './AppHeader.vue'
   import AppFooter from './AppFooter.vue'
-  import Category from './Category.vue'
+
   export default {
     components: {
       'app-header': AppHeader,
-      'app-footer': AppFooter,
+      'app-footer': AppFooter
-      'category': Category
     }
   }
 </script>

src/theme/Login.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="content">
+  	<h2>Login</h2>
+  	<div class="field is-horizontal">
+  		<div class="field-label is-normal">
+  		  <label class="label">Username</label>
+  		</div>
+  		<div class="field-body">
+  		  <div class="field">
+  			<div class="control">
+  			  <input class="input" type="text"
+  			  placeholder="Your username">
+  			</div>
+  		  </div>
+  		</div>
+  	</div>
+  	<div class="field is-horizontal">
+  		<div class="field-label is-normal">
+  		  <label class="label">Password</label>
+  		</div>
+  		<div class="field-body">
+  		  <div class="field">
+  			<div class="control">
+  			  <input class="input" type="password"
+  			  placeholder="Your password">
+  			</div>
+  		  </div>
+  		</div>
+  	</div>
+  	<div class="field is-horizontal">
+  		<div class="field-label">
+  		  <!-- Left empty for spacing -->
+  		</div>
+  		<div class="field-body">
+  		  <div class="field">
+  			<div class="control">
+  			  <button class="button is-primary">
+  				Login
+  			  </button>
+  			</div>
+  		  </div>
+  		</div>
+  	</div>
+  </div>
+</template>

src/theme/NotFound.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    OOPS Page Not Found
+  </div>
+</template>