Vue

HTML

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!--https://unpkg.com/vue-router/dist/vue-router.js-->
<div id="app">
  <router-view></router-view>
</div>

<template id="home-view">
<div>
  <h1>Home View</h1>
    <router-link 
      v-for="article in articles"         
      :to="{ name: 'article', params: { article: article }}" :key="article.id">
        {{ article.title }}
    </router-link>
</div>  
</template>

<template id="article-view">
  <div>
    <h1>Article View</h1>
    <router-link to="/">Back Home</router-link>
    <p>
      {{ article.id }}
      {{ article.description }}  
    </p>
  </div>
</template>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

const HomeView = { 
	template: '#home-view',
  data() {
    return {
      articles: [
        { 
          id: 1,
            title: "article 1 title",
            description: "article 1 description",
            created_at: "2020-07-10T08:32:11.474Z",
            updated_at: "2020-07-10T08:32:11.474Z"
        },
        {
          id: 2,
          title: "article 2 title",
          description: "article 2 description",
          created_at: "2020-07-10T08:32:11.474Z",
          updated_at: "2020-07-10T08:32:11.474Z"
        }
      ]
    };
  }
};

const ArticleView = { 
	template: '#article-view', 
  props: ['article']
};

const routes = [
  { path: '/', name: 'home', component: HomeView },
  { 
    path: '/articles/:articleId', 
    name: 'article',
    component: ArticleView,
    props: (route) => ({
        articleId: route.params.article.id,
        ...route.params
    })
  }
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

const app = new Vue({
  router,
}).$mount('#app')