Vue Routing Tutorial: Getting started with Vue Router

• Bacancy Technology
• Blog
• Vue.JS

Why do we need Vue Router?

Routing is a very basic need to be implemented in any project. It helps link the views with their URLs. Every modern framework allows you to implement routing. VueJS provides the Vue Routing library for linking components to routes.

Building SPAs with the help of VueJS is one of the biggest advantages. SPAs are interactive because the pages don’t reload when the URL changes.

For building SPA you’ll need Vue Router.

Routing can be classified in two types-

• Server Side Routing- client requests server whenever the route changes
• Client Side Routing- client requests server only on the initial page load. Further, all the route related changes are handled by the client.

Vue Router: Tutorial Goal

We will build a demo blog application which will consist of posts (title/description) and comments (related to the post). We will retrieve data using axios. And for that these APIs are used –

• To fetch posts –

https://jsonplaceholder.typicode.com/posts.

• To fetch post details of post 1 –

https://jsonplaceholder.typicode.com/posts/1.

• To fetch comments of post 1 –

https://jsonplaceholder.typicode.com/comments?postId=1.

Each row consists of a blog post. On clicking the blog, we will be able to view comments and post details.

Vue Router Example: Steps to Implement Basic Vue Routing

We have divided the steps into three sections-

• Project Setup
• Create Vue components
• API Implementation

Follow this step-by-step guide to implement Vue Routing.

1) Project Setup

• Install vue-cli

npm install --global vue-cli

• Create a new project

vue create vue-router-example

When the questions are prompted on your terminal, ensure your answer is “yes” for vue-router installation.

• Install dependencies

cd vue-router-example
npm install axios bootstrap-vue

• Run the server

npm run serve

After running the above command, you’ll see the default screen on http://localhost:8080/.

2) Create Vue Components

Before moving forward, have a look at the folder structure of vue-router-example

(Folder structure can vary from person to person)

Note down the file names and copy-paste the code, respectively.

Let’s start with setting up the routes. Open router/index.js

router/index.js

Import vue-router package to navigate the components. There are in-total five routes to implement but here in this section we will cover the first two routes for setting up the basic routing.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Posts  from "../components/Posts.vue";
 
Vue.use(VueRouter)
 
const routes = [
 {
   path: '/', redirect: '/posts'
 },
 {
   path: '/posts',
   component: Posts,
 },
]
 
const router = new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes
})
 
export default router

Explanation

‘/’ defines the default view, here Home page. We will redirect ‘/’ to ‘/posts’ which will display component Posts.

Let’s have a look at our default UI. Open App.vue.

App.vue

The default UI will consist of Home Link and the views based on the routes hit.

On clicking Home the UI will be redirected to ‘/’ and display the respective component from file router/index.js.

< router-view /> maps routes with its respective component.

<template>
 <div id="app">
   <div id="nav">
     <router-link to="/">Home</router-link>
   </div>
   <router-view/>
 </div>
</template>

Now, moving towards individual components.

components/AllPosts.vue

AllPosts.vue is used for displaying all the posts.

<template>
   <div>
     <post-card :posts="allPosts"></post-card>
  </div>
</template>
 
<script>
import { Service } from "../service.js";
import PostCard from './PostCard.vue';
 
export default {
 components: { PostCard },
 name: 'Posts',
 created() {
   this.getAllPosts();
 },
 data() {
   return {
     allPosts: [],
   }
 },
 methods: {
   getAllPosts() {
     Service.get(`posts`)
       .then(res => {
         this.allPosts = res.data;
       })
       .catch(error => console.log(error));
   },
 }
}
</script>

Explanation

We have imported

• PostCard from /PostCard for displaying single posts.
• Service from service.js to access the remote data using Service.get(‘posts’). On resolving the promise, we will store the response in the array named allPosts and if the promise is rejected then we will simply console the error.

Now let’s see what PostCard.vue component?

components/PostCard.vue

<template>
 <div>
   <b-card
     v-for="post in posts"
     :key="post.id"
     :style="{ backgroundColor: background(post.id) }"
     class="post"
   >
     <b-row class="row1">
       <p class="title">
           Title - {{ post.title }}
       </p>
       <p class="body"
         :title="post.body"
       >
         Description - {{ post.body.slice(0, 70) + "..." }}
       </p>
     </b-row>
   </b-card>
 </div>
</template>
 
<script>
export default {
 name: "postCard",
 props: ["posts"],
 methods: {
   background: function(postId) {
     return postId % 2 == 0 ? "#B5E0D9" : "#FFE6E6";
   },
 },
};
</script>

We have used < b-card />, < b-row />, and < b-col /> from the bootstrap-vue.

All the posts will be displayed using posts prop with Post Title and Post Description.

3) API Implementation

Moving towards API implementation using axios in the service.js file.

service.js

Import ‘axios’ to fetch the data from the base URL – https://jsonplaceholder.typicode.com/

We are creating an instance of axios using the ‘create()’ method where the resource is accessed via baseURL prop.

import axios from 'axios';
export const Service = axios.create({
 baseURL: `https://jsonplaceholder.typicode.com/`
})

After implementing the Basic Routing with the help of Vue Router the UI so far will look like this (excluding style) –

Now, let’s implement dynamic routing.

You may like to read

Why Use Vue JS?

Dynamic Routing using Vue Router

On clicking a specific post, we want post details to be displayed. And to fetch data we will use post.id of that particular post.

Create one component named PostDetails and make a few changes in router/index.js and PostCard.vue

router/index.js

 {
  path: '/posts/:id',
  component: PostDetails
 },

Now, whenever route ‘/post/:id’ will hit, the PostDetails component will render. As said before, on the click of any post title, we will send its id to the route. To implement this, open file PostCard.vue and write this code.

components/PostCard.vue

<p class="title">
   <router-link
     :to="'/posts/' + post.id"
    >
      Title - {{ post.title }}
    </router-link>
</p>

Moving towards the PostDetails component.

components/PostDetails.vue

<template>
 <div>
   <b-container
     :style="{ backgroundColor: background(this.postId) }"
     v-if="postDetails"
   >
     <b-row>
       <b-col cols="12">
         <h2>{{ postDetails.title }}</h2>
       </b-col>
     </b-row>
     <div class="postBody">
       <b-row align-h="center">
         <b-col cols="10">
           <p>{{ postDetails.body }}</p>
         </b-col>
       </b-row>
     </div>
     <b-row>
       <b-col cols="12" class="commentTitle">
         <h2 style="font-weight: 500">Comments</h2>
       </b-col>
       <comment-tile :comments="allComments"></comment-tile>
     </b-row>
   </b-container>
   <h3 v-else>Loading....</h3>
 </div>
</template>
 
<script>
import { Service } from "../service.js";
import commentTile from "./CommentTile.vue";
 
export default {
 name: "PostDetails",
 components: {
   commentTile,
 },
 mounted() {
   this.getPostDetails();
   this.getComments();
 },
 data() {
   return {
     postId: this.$route.params.id,
     postDetails: null,
     allComments: [],
   };
 },
 methods: {
   getPostDetails() {
     Service.get(`posts/${this.postId}`)
       .then((res) => {
         this.postDetails = {
           ...res.data,
         };
         this.getUserDetails(this.postDetails.userId);
       })
       .catch((error) => console.log(error));
   },
   getComments() {
     Service.get(`comments?postId=${this.postId}`).then((res) => {
       this.allComments = res.data;
     });
   },
   background: function(postId) {
     return postId % 2 == 0 ? "#B5E0D9" : "#FFE6E6";
   },
 },
};
</script>

Post details will consist of-

• post title
• post description
• post comments.

To display that we will use components from bootstrap-vue.
Two API calls are made from service.js.

• To fetch post details

getPostDetails() {
     Service.get(`posts/${this.postId}`)
       .then((res) => {
         this.postDetails = {
           ...res.data,
         };
       })
       .catch((error) => console.log(error));
 },

• To fetch post comments

 getComments() {
   Service.get(`comments?postId=${this.postId}`)
    .then((res) => {
      this.allComments = res.data;
    })
    .catch((error) => console.log(error));
 },

As we will be having a lot of comments related to single post we will create a separate component for displaying comments named CommentTile.vue

components/CommentTile.vue

The component will show the comments related to the respective post.

<template>
 <div>
   <b-col cols="12" v-if="comments">
   <b-col cols="10" v-for="comment in comments" 
:key="comment.id" class="comment">
     {{ comment.body }}
   </b-col>
 </b-col>
 <h5 v-else>Loading....</h5>
 </div>
 </template>
 
<script>
export default {
 name: "commentTile",
 props: ["comments"],
};
</script>

After implementing Dynamic Routing using Vue Router the UI will be something like this (excluding style) –

Heading towards the last section of Vue Router Tutorial – Implementation of Page Not Found.

Implementing Page Not Found

Create a component named – PageNotFound.vue inside components folder and make the required changes in router/index.js.

router/index.js

PageNotFound component will render whenever an invalid route hits.

 {
   path: '*', component: PageNotFound
 }

components/PageNotFound.vue

<template>
 <h2>You have entered the wrong url.
 Try going to <router-link to="/">Home Page</router-link>.
</h2>
</template>
 
<script>
export default {
 name: 'PageNotFound'
}
</script>

Conclusion

Frequently Asked Questions (FAQs)