Latest Code Tutorials

How To Use vue-router in VueJS


How to use vue-router is today’s our most important topic. VueJS is frontend Library which can be used with any backend Languages. If you do not know, how to set up VueJS development environment, then please check out my this tutorial on Vuejs Tutorial With Example

If we want to create fully functional front end application, then vue-router and vue-resource are two great pillars in VueJS. So today we will deep dive on vue-router. Routing is the way to manage the components in a Single Page Applications. All the Famous Front End Frameworks utilizes the concept of Routing.

How to use vue-router?

First, we need to create one project to understand the routing concepts in VueJS. We are going to see vue-router with an example.

Step: 1 Create one project.

Create one project. 

mkdir VueRoute

Go to that project and create one file called package.json. Copy the following code into the package.json file.

 "name": "vuerouter",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "start": "webpack-dev-server"
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "babel-core": "^6.25.0",
 "babel-loader": "^7.1.1",
 "babel-plugin-transform-runtime": "^6.23.0",
 "babel-preset-es2015": "^6.24.1",
 "babel-preset-stage-3": "^6.24.1",
 "babel-runtime": "^6.25.0",
 "vue-loader": "^13.0.2",
 "vue-template-compiler": "^2.4.2",
 "webpack": "^3.4.1",
 "webpack-dev-server": "^2.6.1"
 "dependencies": {
 "vue": "^2.4.2",
 "vue-router": "^2.7.0"

Now, you need to install Node.js to work with this project. So after copying the code. Type in terminal following command.

npm install

It will install all the dependencies regarding Vue.js, vue-router, Webpack, ES6, Babel.

Step 2: Make webpack.config.js file.

Next step would be to configure our webpack.config.js file. Create one file in a root called webpack.config.js. Put the following code in that file.

// webpack.config.js

module.exports = {
  // This is the "main" file which should include all other modules
  entry: './src/main.js',
  // Where should the compiled file go?
  output: {
    filename: 'bundle.js'
  resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  module: {
    // Special compilation rules
    loaders: [
        // Ask webpack to check: If this file ends with .js, then apply some transforms
        test: /\.js$/,
        // Transform it with babel
        loader: 'babel-loader',
        // don't transform node_modules folder (which don't need to be compiled)
        exclude: /node_modules/
        // Ask webpack to check: If this file ends with .vue, then apply some transforms
        test: /\.vue$/,
        // don't transform node_modules folder (which don't need to be compiled)
        exclude: /(node_modules|bower_components)/,
        // Transform it with vue
      use: {
        loader: 'vue-loader'
devServer: {
       port: 3000

Create one src folder and in that create one file called main.js. This file would be compiled, and with webpack, it becomes bundle.js. 

Now create one file called in a root called index.html and put the following code in it.

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>VueJS Routes</title>
    <div id="app"></div>
    <script src="bundle.js"></script>

Here, I have included final JavaScript file called bundle.js.

Step 3: Make components directory.

In src folder, create one another directory called components. We are saving all of our components files in here. Our main.js file will register all of our components, and then we compile this file via webpack.

The first component would be Home.vue. So create Home.vue inside components.


  export default {


Then second would be About.vue

// About.vue

  <h1>About us</h1>

  export default {


A third will be Contact.vue

// Contact.vue
<h1>Contact us</h1>

  export default {


Step 4: Config vue-router module.

In main.js file first, we need to import a vue-router module from a node_modules folder because we have installed all of our dependencies in this project. Copy the following code into our main.js file.

// main.js

import Vue from 'vue'
import VueRouter from 'vue-router'


import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }

new Vue({
  template: `
    <div id="app">
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
        <li><router-link to="/contact">Contact</router-link></li>

I will describe each and every step in this file.

  1. First I have imported the vue-router and other required components to run this application.
  2. Created one vue-router instance and pass the configurable object in it.
  3. Created routes array to define URI pattern and also its related components.
  4. Also, create a router-view element to show the data related to specific routes.
  5. Finally created VueJS instance and pass the router object, main template and this will mount in our app id.

Now, run the following command in your terminal.

npm start

It will start the webpack server. Generally, the port is 8080 but I have changed it to 3000 in the webpack.config.js file. Go to the following URL.


vue-router tutorial


If you click the about then the underlying component will be called and it will render via <router-view><router-view> elements.

vue-router example


And your URL will be: http://localhost:3000/about

There are so many other examples you can follow in this URL.

You can find this how to use vue-router in VueJS project in the following Github URL

If you still have any doubt then ask in a comment below, I am happy to help you.


  1. tejo prabowo says

    it’s good

    1. Krunal says

      Thanks man

  2. moktar says

    hey first thanks for all this great tuto ,
    and i face this problem and i don’t know what is that mean “Cannot GET /about”

    1. Duc says

      Becase you don’t have route for it. You reload page it is not found route. You have learn more about serve side rendering (Learn vuejs + php…)

  3. some says


  4. Cathleen says

    Hi – I have been searching high and low for an answer to whether or not vue-router with “history” can work on serverless deployments? Since very article I’ve reviewed thus far indicates server settings are necessary, i’m guessing no, but wondered why such an important feature wouldn’t be supported for serverless deployments (e.g. lambda s3 public bucket hosting)

  5. Babak Bandpey says

    Hello Mr. Krunal

    This is the best help I have seen on VueRouter

    specially this line: Vue.use(VueRouter)

    Thank you so much.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.