Routing to Individual Blogs in a Vue

Ole Ersoy
Oct 29, 2020


Image by Jim Semonik from Pixabay


We completed a list of our blogs.

When we click on a blog link we want to display it.



First add these two blog links to the bottom of the BlogsComponent template so it looks like this:

<div v-for="blog of blogs" :key="blog.title">
<h1>{{ blog.title }}</h1>
<p>{{ blog.content }}</p>
<router-link to="/blogs/0">The First Blog</router-link>
<router-link to="/blogs/1">The Second Blog</router-link>

Blog Component

In the src/components/ folder create the file BlogComponent.vue . Make it look like this:


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.

Brought to You By



Ole Ersoy

Founder of Firefly Semantics Corporation

Recommended from Medium


See more recommendations