Added dynamic route and history mode

Author: Gregg

src/App.vue

@@ -2,7 +2,6 @@
   <div id="app">
     <div id="nav">
       <router-link :to="{ name: 'event-list' }">List</router-link> |
-      <router-link :to="{ name: 'event-show' }">Show Event #1</router-link> |
       <router-link :to="{ name: 'event-create' }">Create</router-link>
     </div>
     <router-view/>

src/router.js

@@ -7,16 +7,18 @@ import EventShow from './views/EventShow.vue'
 Vue.use(Router)
 
 export default new Router({
+  mode: 'history',
   routes: [
     {
       path: '/',
       name: 'event-list',
       component: EventList
     },
     {
-      path: '/event',
+      path: '/event/:id',
       name: 'event-show',
-      component: EventShow
+      component: EventShow,
+      props: true
     },
     {
       path: '/event/create',

src/views/EventList.vue

@@ -1,3 +1,7 @@
 <template>
-  <h1>Events Listing</h1>
+  <div>
+    <h1>Events Listing</h1>
+
+    <router-link :to="{ name: 'event-show', params: { id: '1' } }">Show Event #1</router-link>
+  </div>
 </template>

src/views/EventShow.vue

@@ -1,3 +1,8 @@
 <template>
-  <h1>Showing event #1</h1>
+  <h1>Showing event #{{ id }}</h1>
 </template>
+<script>
+export default {
+  props: ['id']
+}
+</script>