Routing to Individual Blogs in a Vue

Image by Jim Semonik from Pixabay

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.

Brought to You By

Founder of Firefly Semantics Corporation

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript Closures

What Is JavaScript And How To Enable It?

How compress your React App?

https://youtu.be/Ri7-vnrJD3k

10 Best Nike Running Jackets Reviewed https://t.co/7yQfQOU57m https://t.co/WLVY59R3F1

The JavaScript guide to LocalStorage vs. SessionStorage

JavaScript Interview Question and Answer.

Browser Fingerprinting using Clientinfo Module/Tool

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation

More from Medium

Taking a Query Snapshot of a Firefly Semantics Slice Entity Store

File upload button | Plupload.com File uploader

A Walkthrough for fetching API

Docker Component Basics