<template>
  <div>
    <div v-for="article in articles" :key="article.id">
      <router-link :to="{ name: 'ArticleShow', query: { id: article.id } }">
        <p>
          {{ article.created_at }}&nbsp;&nbsp;
          {{ article.title }}
        </p>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      articles: []
    }
  },
  mounted () {
    this.$http.get('http://localhost:3000/api/articles')
      .then(response => {
        console.info(response.data)
        this.articles = response.data.articles
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

<template>
  <div>
    <p>
      {{ article.title }}<br/>
      {{ article.created_at }}
    </p>
    <p>
      {{ article.content }}
    </p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      article: {}
    }
  },
  mounted () {
    this.$http.get('http://localhost:3000/api/articles/' + this.$route.query.id)
      .then(response => {
        this.article = response.data
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script> 

import Vue from 'vue'
import Router from 'vue-router'
import ArticleList from '@/components/ArticleList'
import ArticleShow from '@/components/ArticleShow'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/articles',
      name: 'ArticleList',
      component: ArticleList
    },
    {
      path: '/article',
      name: 'ArticleShow',
      component: ArticleShow
    }
  ]
})