loading routes

Author: danielabar

README.md

@@ -23,6 +23,8 @@
     - [Slots](#slots)
     - [Scoped Styles](#scoped-styles)
     - [Extract Styles](#extract-styles)
+  - [Routing](#routing)
+    - [Loading Routes](#loading-routes)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -450,3 +452,31 @@ Finally, modify [index.html](index.html) to include the extracted css file:
 ```html
 <link rel="stylesheet" href="/assets/styles.css">
 ```
+
+## Routing
+
+### Loading Routes
+
+Use [vue-router](https://router.vuejs.org/en/), the official Vue.js plugin for routing. First install it:
+
+```shell
+npm install [email protected] --save
+```
+
+Vue plugins are scripts that can be used to extend functionality of Vue globally.
+
+[router.js](src/router.js)
+
+Recall in app.js, Layout component is mapped to the Vue app. This means every time a page is loaded, the Layout.vue component is loaded.
+
+Router is exported, then imported into app.js. To use it, extend the Vue instance with the Router instance.
+
+After router is configured to have default path point to Category component, this component can be removed from Layout component and replaced with `<router-view></router-view>` reserved element:
+
+```html
+<div class="container content">
+  <router-view></router-view>
+</div>
+```
+
+Every time page is loaded, router will determine current path, load component linked to path and add its template in the `<router-view>` section.

package-lock.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "bulma": "0.5.1",
     "express": "4.15.4",
-    "vue": "2.4.2"
+    "vue": "2.4.2",
+    "vue-router": "^2.7.0"
   },
   "devDependencies": {
     "babel-core": "6.26.0",

package.json

@@ -1,12 +1,14 @@
 import Vue from 'vue'
 import AppLayout from './theme/Layout.vue'
+import router from './router'
 
 console.log(AppLayout)
 
-// `render` property is a Vue.js function that returns an element
-// include AppLayout as the rendered result
+// extemd Vue instance with router plugin instance
 const app = new Vue({
-  render: h => h(AppLayout)
+  router,
+  ...AppLayout
 })
 
-export { app }
+// export router as well because it may be needed by client entry later
+export { app, router }

src/app.js

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Category from './theme/Category.vue'
+
+// connect VueRouter plugin with Vue configuration
+Vue.use(VueRouter)
+
+// configure router with an object of options
+// `router` is a property of options object to specify an array
+// this array will link routes with components
+// any component referenced in routes must be imported above
+// recall in app.js, Layout component is mapped to the Vue app
+const router = new VueRouter({
+  routes: [
+    {path: '/', component: Category}
+  ]
+})
+
+export default router

src/router.js

@@ -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>
@@ -13,12 +13,10 @@
 <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,
-      'category': Category
+      'app-footer': AppFooter
     }
   }
 </script>