How to use routing in Vue.js?

The process of assigning URLs to components in the Vue.js app is known as routing. Installing the Vue-router library and importing it into the Vue instance are prerequisites for implementing routing. Then, the user must specify the components displayed for each route in a different router.js file after defining a set of routes.

Users may specify where the components for each route should be displayed in the main Vue template using the “router-view” component, and also, the users can switch between routes using the “router-link” component. A clicked link created by the routerlink component alters the URL and modifies the component visible in the router-view component.

Users can navigate between pages or components without refreshing the entire page by using routing to create a multi-page experience within a single-page app.

Steps to use routing in Vue.js

The following steps are involved in Vue.js routing −

• Install the vue-router library in the project −

  Run the following command in the project's directory to install the vue-router library.

npm install vue-router 

• Import the vue-router library − The user must import the vue-router library into their Vue instance after it has been installed. Then they may now use the Vue-router capability in the Vue project.

• Defining routes − A set of routes that link URLs to the elements that should be displayed for each route needs to be created in a different router.js file. A route comprises the component that should be shown for it, the route’s name, and a URL path.

• Specifying the router − To use the router in the Vue app, the user must import the router.js file and specify the router parameter in the project.

• Using the component − The component allows the user to choose where the components for each route should be shown in the user’s primary Vue template. This component acts as a stand-in for the component related to the current route. Users may use the component to transition between routes in their templates. The component generates a clickable link that updates the visible component and the URL of the component.

These steps will assist users in adding routing to their Vue.js application, allowing them to transition between pages or components without reloading the entire page.

Example

In this example, we will use routing in Vue Js to navigate between two components and display a message on the webpage on each routing component. We have taken two routing links such as ‘Home’ and ‘About.’ The ‘Home’ link displays the ‘HomeComponent,’ and the ‘About’ link displays the ‘AboutComponent.’ These are the following files that need to be created and used −

router/index.js − we have created a folder named router and created index.js file on it. This file stores all the info related to the routing.

import Vue from 'vue'
import Router from 'vue-router'
import HomeComponent from '@/components/HomeComponent'
import AboutComponent from '@/components/AboutComponent'
Vue.use(Router)
export default new Router({
   routes: [
      {
         path: '/',
         name: 'HomeComponent',
         component: HomeComponent
      },
      {
         path: '/about',
         name: 'AboutComponent',
         component: AboutComponent
      }
   ]
})

The ‘/’ route is the app’s default routing and will show the HomeComponent. ‘/about’ means whenever the URL changes to ‘/about,’ the AboutComponent will show.

HomeComponent.vue − This is the home component in src’s component folder.

<template>
   <div>
      <h2>This is HomeComponent</h2>
   </div>
</template>
<script>
   export default {
      name: 'HomeComponent'
   }
</script>

AboutComponent.vue − This is the about component in the component folder in src.

<template>
   <div>
      <h2>This is AboutComponent</h2>
   </div>
</template>
<script>
   export default {
      name: 'AboutComponent'
   }
</script>

main.js − this file is available on the src folder and here we need to import our router folder’s index.js file

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an
alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
   el: '#app',
   router,
   components: { App },
   template: '<App/>'
})

App.vue − This file consists of the router-view and the router-link, and it is the root file of our project.

<template>
   <div>
      <div>
         <router-link to="/" class="link">Home Component</router-link>
         <router-link to="/about" class="link">About Component</router-link>
      </div>
      <router-view />
   </div>
</template>
<script>
   export default {
      name: 'App'
   }
</script>
<style>
   .link{
      padding: 5px;
      color: blue;
   }
</style>

The router-link is used to route the URL without reloading the page. The ‘to’ attribute is used to navigate to that particular URL. The is where the routed components will show based on the current URL. For example: if the current URL is’/about,’ then in place of the , we will see the AboutComponent.

Output

The routing of Vue is a very useful and powerful tool; we can navigate to any URL and display a specific component. The simple format of the routing makes it easy for the users to use it to their needs.