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.

Author: basejump

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. 
+
 
 
 

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

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

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')