Vue Router — The Official Router For VueJS

One of the most powerful features of modern single-page web applications (SPA) is routing. Modern single-page apps such as a Vue application can transition from page to page on the client-side (without requesting the server). Vue Router is the official library for page navigation in Vue applications.

Image From Google

We will cover:

• Why do we need Vue Router in VueJS?
• Installation
• Vue Router Essentials
• Conclusion

Why We Need Vue Router in VueJS?

We need a router when you need to sync URLs to views in your app. It’s a very common need, and all the major modern frameworks now allow you to manage routing. The Vue Router library is the way to go for Vue.js applications.

One of the biggest advantages of VueJS is the ability to build great Single Page Applications (SPAs).

Single Page Applications are great because they don’t require page loads every time the route changes. This means that once everything is loaded, we can switch the view really quickly and provide a great user experience.

If you want to build a SPA in Vue, you’re going to need Vue Router.

Routing is often categorized into two main buckets:

• Server-side routing: the client (i.e. the browser) makes a request to the server on every URL change.
• Client-side routing: the client only makes a request to the server upon initial page load. Any changes to the application UI based on URL routes are then handled by the client.

Installation

We can easily install the Vue router using npm

npm install vue-router

When used with a module system, you must explicitly install the router via Vue.use():

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

Vue.use(VueRouter)

Yes, it is easy to install the Vue Router to your app, creating Single Page Application is looking smooth and feel natural.

Let take an example of the basic code for setting the routes in VueJs.

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Volla..!</h1>
  <p>
    <router-link to="/home">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- if component matched then render here-->
  <router-view></router-view>
</div>

Now the HTML code was ready to use the router, this is clickable by the HTML but needs to set the routes.

import Vue and VueRouter
Vue.use(VueRouter)

const home = { template: '<div>Home</div>' }
const about = { template: '<div>About</div>' }
//Above two are imported from others.

const routes = [
  { path: '/home', component: Home},
  { path: '/about', component: About}
]

// Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
const router = new VueRouter({
  routes // short for `routes: routes`
})

// Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount('#app')

Vue Router Essentials

Image from google

Dynamic Routing

Vue Router also lets you match a URL pattern to a component instead of having to hardcode every possible route. This is extremely useful for configuring posts, profile pages, or other content that can be dynamically created/removed.

We use a colon : to define a dynamic path in Vue router. For example, if we wanted to dynamically match posts, the route would look like this.

{
  path:  '/home/:homeID',
  name:  'home',
  component:  Home
}

This route navigates every URL with the /home/:homeID pattern to the same Home.vue component

If we want to be to get the homeID inside our component, there are two ways to accomplish this.

1. Our homeID will be accessible in ArticlePage via the $route.params object
2. We can pass homeID as a prop to our component.

The second method was most appropriate so I recommend you to use that. We have to be sure that the name for the router was the same as the prop.

<template> 
<div> {{ userID }} </div> 
</template> 
<script> 
export default { 
props: { 
userID: String 
} 
}
</script>

Navigation Routes

If you want to redirect, cancel or modify the navigation during the routing process then Navigation Routes plays a great role that came under the advanced topics in Vue Router.

1. Component Guards
2. Global Guards
3. Route Specific Guards

If you want to learn more about the Navigation routes then Click Here

Conclusion

Vue Router is an official and great library for VueJS that can help the concept of routing. All of your routes live inside one router.js file that gets injected as a dependency into your Vue Instance.

Unlike its competitors, Vue Router is a first-party proprietary router created by the Vue.js Core Team. The Vue Router library is the way to go for Vue.js applications. Vue does not enforce the use of this library. You can use whatever generic routing library you want, or also create your own History API integration, but the benefit of using Vue Router is that it’s official.

You can find more about these features in their documentation, and I invite you to try them out to see how easy it is.