Add redirect to blog-article

resources/js/components/BlogRecent.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="list">
             <ul class="blog-items">
-                <li class="blog-item" v-for="article of articles" :key="article.id">
+                <li class="blog-item" v-for="article of articles" :key="article.id" @click="onClick(article)">
                     <img
                         class="article-image"
                         src="//via.placeholder.com/128"
@@ -56,6 +56,16 @@ export default {
         absDate(date) {
             return moment(date).format('MMMM Do YYYY, hh:mm:ss');
         },
+        onClick(article) {
+            const date = moment(article.date);
+            const year = date.year();
+            const month = date.month() + 1;
+            const day = date.date();
+            const id = article.id;
+            const slug = article.slug;
+
+            this.$router.push({ name: 'blog-article', params: { year, month, day, id, slug }});
+        },
     },
 }
 </script>

resources/js/router-app.js

@@ -2,12 +2,14 @@ const VueRouter = require('vue-router');
 
 import Home from './views/Home.vue';
 import Blog from './views/Blog.vue';
+import BlogArticle from './views/BlogArticle.vue';
 import Snippets from './views/Snippets.vue';
 import Contact from './views/Contact.vue';
 
 const routes = [
     { path: '/', name: 'index', component: Home },
     { path: '/blog', name: 'blog', component: Blog },
+    { path: '/blog/:year/:month/:day/:id-:slug', name: 'blog-article', component: BlogArticle, props: true },
     { path: '/snippets', name: 'snippets', component: Snippets },
     { path: '/contact', name: 'contact', component: Contact },
 ];

resources/js/views/BlogArticle.vue

@@ -0,0 +1,15 @@
+<template>
+    {{ id }} - {{ slug }}
+</template>
+
+<script>
+export default {
+    props: {
+        'year': String|Number,
+        'month': String|Number,
+        'day': String|Number,
+        'id': String|Number,
+        'slug': String,
+    },
+}
+</script>