Introduction to Vue JS Router

Posted By : Manish Nayal | 23-Apr-2021

 

INTRODUCTION

 

In this post, I am going to tell you all about the use of Vue Router in Vue JS project which is a very useful library for managing routings in Vue js applications. There are lot more things to discuss about, so let's get started.

 

Integration:

 

You can integrate Vue Router in your application in multiple ways and I will start with the easiest one.

 

1) Direct Download / CDN:

 

  unpkg.com provides npm-based CDN links.

 

  The above link will always point to latest release on npm. You can also use a specific version/tag via URLs like:

 

  https://unpkg.com/[email protected]/dist/vue-router.js

 

 

  In your index.html like this:

 

 

  <script src="/path/to/vue.js"></script>
 <script src="/path/to/vue-router.js"></script>

 

 

2) With NPM:

 

   npm install vue-router

 

 

   Now, configure your Vue instance to use it.

 

      import Vue  from 'vue';

   import VueRouter from 'vue-router';

   Vue.use(VueRouter);

 

3) With Vue CLI:

 

    If you have a project using Vue CLI you can add Vue Router as a plugin. You can let CLI generate the code above for you as well as two sample routes. It will also overwrite your App.vue, so make sure to      backup the file before running the following command inside the project:

 

 

    vue add router

 

     

After integration work:

 

   Once you've integrated Vue Router in your project you just need to place a tag called <router-view></router-view> and map each path with their specific component. Like so,

 

 

   <div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>

 

 

In your routing config you can define the components this way:

 

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/contact',
    name: 'Contact',
    component:Contact
  },
  {
    path:'/coreJava',
    name:'Core Java',
    component: () => import('../views/CoreJava.vue')
  },
  {
    path:'/blogs',
    name:'Blogs',
    component:() => import('../views/Blogs.vue')
  }
]

 

 

That's it for using routes in Vue JS. Now as you visit the path specified it will render the specific component you've mapped.

 

 

About Author

Author Image
Manish Nayal

He likes making stuff on the Internet and specialises in designing digital products such as websites and web apps. He is frontend developer having good knowledge of various frontend technologies.

Request for Proposal

Name is required

Comment is required

Sending message..