Added dynamic routing for events

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
 

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.
+    // }
   ]
 })

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>

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>

src/views/NotFound.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>404 Route not found</h1>
+</template>