How to Use vue-router in Vue.js

Routing in Vue is used to navigate the Vue application, and it happens on the client side (in the browser) without full page reload, which results in a faster user experience.

Here are the steps to implement vue-router in Vue.js.

Step: 1 Create one project.

Create one project. 

mkdir VueRoute

Go to that project and create one file called package.json. Then, 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"
 }
}

Install Node.js to work on this project. So after copying the code. Type in the terminal the following command.

npm install

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

Step 2: Make a webpack.config.js file.

The 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>
<html>
  <head>
    <meta charset="utf-8">
    <title>VueJS Routes</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

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

Step 3: Make a components directory.

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

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

<template>
  <h1>Home</h1>
</template>

<script>
  export default {

  }
</script>

The second would be About.vue.

// About.vue

<template>
  <h1>About us</h1>
</template>

<script>
  export default {

  }
</script>

A third will be Contact.vue.

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

<script>
  export default {

  }
</script>

Step 4: Config vue-router module.

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

// main.js

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

Vue.use(VueRouter)

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({
  router,
  template: `
    <div id="app">
      <ul>
        <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>
      </ul>
      <router-view></router-view>
    </div>
  `
}).$mount('#app')

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: http://localhost:3000

If you click the about, the underlying component will be called and rendered via <router-view><router-view> elements.

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

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

https://github.com/vuejs/vue-router/tree/dev/examples

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

https://github.com/KrunalLathiya/VueRouter

Please comment below if you have any doubts; I am happy to help.

7 thoughts on “How to Use vue-router in Vue.js”

  1. 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”

    Reply
    • 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…)

      Reply
  2. 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)

    Reply
  3. Hello Mr. Krunal

    This is the best help I have seen on VueRouter

    specially this line: Vue.use(VueRouter)

    Thank you so much.

    Reply

Leave a Comment

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