From 37cf863f2af2be1d7093f1f385cb02b7c67debea Mon Sep 17 00:00:00 2001
From: androiddrew <bednar.andrew@gmail.com>
Date: Fri, 22 Feb 2019 16:00:06 -0500
Subject: [PATCH] Added dynamic routing for events

---
 README.md               |  2 ++
 src/router.js           | 27 +++++++++++++++++++++++++--
 src/views/EventList.vue |  7 ++++++-
 src/views/EventShow.vue |  8 +++++++-
 src/views/NotFound.vue  |  3 +++
 5 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 src/views/NotFound.vue

diff --git a/README.md b/README.md
index 0495d17..0b86c9f 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,8 @@
 - Reusable componets should be located in the components directory.
 - Use Named Routes like `<router-link :to="{ name: 'home' }">Home</router-link>|` so you are changing url paths only in one place (`routes.js`).
 - Use redirects in `routes.js` if your app was in production to prevent issues with external linking to you site. You can use an `alias` property instead, but this could mean in SEO there could be 2 pages with the same content.
+- Dynamic routing provides the params from the route in the `$route.params.<the param name>` for the current route.
+- Linking to Dynamic routes looks like: `<router-link :to="{ name: 'user, params: { username: 'Drew'} }">Drew's user page</router-link>`
 
 ## Project setup
 
diff --git a/src/router.js b/src/router.js
index 6788ecd..4ead3f3 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,10 +3,19 @@ import Router from 'vue-router'
 import EventList from './views/EventList.vue'
 import EventShow from './views/EventShow.vue'
 import EventCreate from './views/EventCreate.vue'
+import NotFound from './views/NotFound.vue'
 
 Vue.use(Router)
 
 export default new Router({
+  // this uses the browers `history.pushstate` API to change the page without refreshs or that # sign in the url
+  // IN PRODUCTION you will need to have the right server config to ensure that all routes return /index.html like in
+  // this example nginx setup:
+  // location / {
+  //   try_files $uri $uri /index.html;
+  //}
+  // THIS MEANS the server won't serve up 404 errors! Look at a solution at the bottom of the routes for a way around this.
+
   mode: 'history',
   base: process.env.BASE_URL,
   routes: [
@@ -16,14 +25,20 @@ export default new Router({
       component: EventList
     },
     {
-      path: '/event',
+      path: '/event/:event_id',
       name: 'event-show',
-      component: EventShow
+      component: EventShow,
+      props: true
     },
     {
       path: '/event/create',
       name: 'event-create',
       component: EventCreate
+    },
+    // MUST BE THE LAST ROUTE TO CATCH 404s
+    {
+      path: '*',
+      component: NotFound
     }
     // {
     //   path: '/',
@@ -48,5 +63,13 @@ export default new Router({
     //   // If you weren't using Named Routes you could also do `redirects: '/about-us'`
     //   redirect: { name: 'about' }
     // }
+    // This is an example of dynamic routing where the router treats the contents after the semi-colon as a parameter for your component.
+    // This is av
+    // {
+    //   path: "/user/:username",
+    //   name: "user-by-name",
+    //   component: User
+    //   props: true // sends the $route.params into your component as props.
+    // }
   ]
 })
diff --git a/src/views/EventList.vue b/src/views/EventList.vue
index ad3a1ba..c0d65fe 100644
--- a/src/views/EventList.vue
+++ b/src/views/EventList.vue
@@ -1,3 +1,8 @@
 <template>
-  <h1>Event Listing</h1>
+  <div>
+    <h1>Event Listing</h1>
+    <router-link :to="{ name: 'event-show', params: { event_id: 1 } }"
+      >Event # 1</router-link
+    >
+  </div>
 </template>
diff --git a/src/views/EventShow.vue b/src/views/EventShow.vue
index 987136e..4ad33fc 100644
--- a/src/views/EventShow.vue
+++ b/src/views/EventShow.vue
@@ -1,3 +1,9 @@
 <template>
-  <h1>Event Show</h1>
+  <h1>Showing Event #{{ event_id }}</h1>
 </template>
+
+<script>
+export default {
+  props: ['event_id']
+}
+</script>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
new file mode 100644
index 0000000..3955300
--- /dev/null
+++ b/src/views/NotFound.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>404 Route not found</h1>
+</template>