Scenario
We completed a list of our blogs.
When we click on a blog link we want to display it.
Approach
Links
First add these two blog links to the bottom of the BlogsComponent template so it looks like this:
<template>
<div>
<div v-for="blog of blogs" :key="blog.title">
<h1>{{ blog.title }}</h1>
<p>{{ blog.content }}</p>
</div> <router-link to="/blogs/0">The First Blog</router-link>
<router-link to="/blogs/1">The Second Blog</router-link>
</div>
</template>
Blog Component
In the src/components/ folder create the file BlogComponent.vue . Make it look like this:
Router
Update src/router/index.js so it looks like this:
import Vue from 'vue'
import Router from 'vue-router'
import BlogsComponent from '@/components/BlogsComponent'
import BlogComponent from '@/components/BlogComponent'Vue.use(Router)routes: [
{
path: '/',
name: 'BlogsComponent',
component: BlogsComponent
},
{
path: '/blogs/:id',
name: 'BlogComponent',
component: BlogComponent
}
]
Run npm run dev and visit http://localhost:8080 . You should now be able to route to the individual blog posts.
