8. The Vue Router

Vue.js is a reactive javascript framework, which is used to build UIs(User Interfaces) and SPAs(Single-page Applications) and developers love to code and feel freedom and comfort while developing applications in Vue.js.

For routing purposes, Vue.js does not provide the built-in routing feature. But there is an official third-party library with the name of Vue Router for providing this feature. By using this feature we can navigate between the web pages but without reloading. So, in this article, we are going to see how we can install and use Vue Router in Vue.js.

Installation

We can install the Vue router into an existing Vue.js project by running the following command in the terminal

npm install vue-router

After a successful installation, we need to import VueRouter in the main.js file in the src directory as well using the following syntax

import Vue from 'vue'
import router from './router'

Vue.use(router)

After importing the router, you are good to go and use vue-router in your project.

But if you are installing Vue.js using Vue CLI. You won’t need this extra installation step. You can add a vue-router plugin during selecting a preset.

Usage

The usage of the vue-router is very simple and easy to use. First, in the template or HTML

// App.vue
<template>
     // Navbar
     <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
</template>

In this pretty simple and clear example of vue-router. We have created simple navigation using router-link components and provided the link using the prop named ‘to’. The router-link works the same as an anchor ‘a’ tag. It is actually rendered as an ‘a’ tag by default.

In the router-view, we will have the relative component which matches the route.

In javascript, we first have to register and import the components to define their routes. We suppose that we have a component named Contact.vue in the views directory to which we will import in the router’s index.js file in the router directory and define it as a route.

To import a component, we use the following statement

import Comp from "../views/Contact.vue";

After importing, we have to define the route now and map it to the component. Like this,

const routes = [
  {
    path: "/contact",
    name: "Contact",
    component: Contact
  }
];

We can give multiple routes too, separated by a comma. Like this,

const routes = [
  {
    path: "/contact",
    name: "Contact",
    component: Contact
  },
  {
    path: "/about",
    name: "About",
    component: About
  }
];

After defining the routes. Pass routes array to the router instances. So, let’s create the router instance as well

const router = createRouter({
   routes // short for `routes: routes`
});

In the end, in the main.js file. We have to create the root instance and mount that as well and inject the routes in it so that the whole app becomes aware of the routes.

createApp(App)
.use(router)
.mount("#app");

By using this injection technique. We can access the router in any component, using this.$router.

We can now programmatically push routes at the click of a button or anything you want, instead of using the router-link component. For example,

methods: {
    clickFunc() {
       this.$router.push('/about')
    }
}

Keep watching this and follow us for more tech articles or you can reach out to me for any doubt and suggestions and the next blog in the series will be published soon.

Thanks

Happy Coding!