From ae8ded8344ad8e4be2217d6f2d9cb1448c317d06 Mon Sep 17 00:00:00 2001
From: basejump <joshdev@9ci.com>
Date: Tue, 9 May 2017 18:25:56 -0500
Subject: [PATCH] Phase7-vue-router 1. Refactor index.html to use router-link
 2. Update main.js per commits to add the router. The docs were light on this
 as most examples talked about how to tie the routes to the componenets to
 show. Turns out its optional and we can use the `$router` var that get
 injected into the Vue.

---
 README.md            | 11 +++++++++++
 vue-app/.eslintrc.js |  2 +-
 vue-app/index.html   |  6 +++---
 vue-app/src/main.js  | 31 ++++++++++++++++---------------
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 6b03cdf..1f85822 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@
 - [Phase 4 - Grails Todo Rest Setup](#phase-4---grails-todo-rest-setup)
 - [Phase 5 - Vue TodoMVC modifications for rest model](#phase-5---vue-todomvc-modifications-for-rest-model)
 - [Phase 6 - Use v-model axios rest wrapper. Add error checking](#phase-6---use-v-model-axios-rest-wrapper-add-error-checking)
+- [Phase 7 - vue-router](#phase-7---vue-router)
 
 <!-- /MarkdownTOC -->
 
@@ -165,6 +166,16 @@ Date: Sun, 07 May 2017 06:01:57 GMT
 
 Try creating a todo with _xxx_ as the title or modifying an existing one. 
 
+## Phase 7 - vue-router
+[see this commit for changes](https://github.com/basejump/grails-vuejs-todomvc-example/commit/b657f26b2eb6a580171bb634795916990a5f1862) 
+
+[vue-router](https://router.vuejs.org/en/) provide route and url view mapping. We were taking the url and parsing it with `function onHashChange ()` and `window.addEventListener('hashchange', onHashChange)`. We have `<a>` links to change the url for the filters on [all,active,completed]. The event listener bascially took the url when it changed from `http://localhost:8090/#/` to `http://localhost:8090/#/completed` and parse off the 'completed' part which is used to then propogate a refilter by setting `this.visibility`. [vue-router](https://router.vuejs.org/en/) is the stadard way of dealing with what to do when the url changes. Should already be installed.
+
+
+1. Refactor index.html to use router-link
+
+2. Update main.js per commits to add the router. The docs were light on this as most examples talked about how to tie the routes to the componenets to show. Turns out its optional and we can use the `$router` var that get injected into the Vue. 
+
 
 
 
diff --git a/vue-app/.eslintrc.js b/vue-app/.eslintrc.js
index d08f566..7dbb00a 100644
--- a/vue-app/.eslintrc.js
+++ b/vue-app/.eslintrc.js
@@ -18,7 +18,7 @@ module.exports = {
   // add your custom rules here
   'rules': {
     'spaced-comment': 0,
-    'quotes':0, 'space-before-function-paren':0, 'semi':0,
+    'quotes':0, 'space-before-function-paren':0, 'semi':0, 'keyword-spacing':0,
     // allow paren-less arrow functions
     'arrow-parens': 0,
     // allow async-await
diff --git a/vue-app/index.html b/vue-app/index.html
index d76c97f..4019a9c 100644
--- a/vue-app/index.html
+++ b/vue-app/index.html
@@ -47,9 +47,9 @@ <h1>todos</h1>
           <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
         </span>
         <ul class="filters">
-          <li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li>
-          <li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li>
-          <li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li>
+          <li><router-link to="/all" :class="{ selected: visibility == 'all' }">All</router-link></li>
+          <li><router-link to="/active" :class="{ selected: visibility == 'active' }">Active</router-link></li>
+          <li><router-link to="/completed" :class="{ selected: visibility == 'completed' }">Completed</router-link></li>
         </ul>
         <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
           Clear completed
diff --git a/vue-app/src/main.js b/vue-app/src/main.js
index 25dba7f..5f8e220 100644
--- a/vue-app/src/main.js
+++ b/vue-app/src/main.js
@@ -1,14 +1,16 @@
 import Vue from 'vue'
+import VueRouter from 'vue-router';
 import TodoModel from './todoModel'
 
 import '../node_modules/todomvc-app-css/index.css'
 // import './styles/styles.scss'
+Vue.use(VueRouter)
 
 // Full spec-compliant TodoMVC with localStorage persistence
 // and hash-based routing in ~120 effective lines of JavaScript.
 
 // visibility filters
-var filters = {
+const filters = {
   all: function (todos) {
     return todos
   },
@@ -24,8 +26,15 @@ var filters = {
   }
 }
 
+const router = new VueRouter({
+  routes: [
+    {path: '/:filterBy'} //no component is needed, just want $route.params
+  ]
+})
+
 // app Vue instance
 var app = new Vue({
+  router,
   // app initial state
   data: {
     todos: [],
@@ -42,6 +51,10 @@ var app = new Vue({
         console.log("changed", todos)
       },
       deep: true
+    },
+    '$route': function () {
+      console.log('filterBy', this.$route.params.filterBy)
+      this.visibility = this.$route.params.filterBy
     }
   },
 
@@ -142,22 +155,10 @@ var app = new Vue({
   created: function() {
     console.log("Ready")
     this.todos = TodoModel.query()
+    console.log('filterBy', this.$route.params.filterBy)
+    if(this.$route.params.filterBy) this.visibility = this.$route.params.filterBy
   }
 })
 
-// handle routing
-function onHashChange () {
-  var visibility = window.location.hash.replace(/#\/?/, '')
-  if (filters[visibility]) {
-    app.visibility = visibility
-  } else {
-    window.location.hash = ''
-    app.visibility = 'all'
-  }
-}
-
-window.addEventListener('hashchange', onHashChange)
-onHashChange()
-
 // mount
 app.$mount('.todoapp')