Vue router: Its complete look you need to explore for software development

Vue.js is a great JavaScript framework created by Evan You, and it’s obviously used to build a Single web page and flexible components, and it’s the most skill required in Front-end Web development. Needless to say, Vue.js certainly provide a bunch of features to build reusable web components. Also, one of the biggest draws of VueJS is the ability to build great Single Page Applications. So, you’re going to need Vue Router to do all of that.

Vue Router: a complete guide
Vue Router: a complete guide

All in all, if your Vue.js applications grow bigger and consist of multiple views, routing becomes a core part of your project. To clarify, this allows users to switch between pages without page refreshing the thing that makes the navigation easy and really nice in your web application. So now, we – ArrowHiTech would like to introduce to you guys some of the basic knowledge you may need to know about Vue Router. Let’s get into it!

What is Vue Router?

Definition of Vue router
Definition of this router

Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Also, its aims are to provide developers with tools for common use cases and be flexible for unique problems. To clarify, this helps link between the browser’s URL/History and Vue’s components allowing for certain paths to render whatever view is associated with it.

Quick set up on Vue Router

While you can easily include Vue Router using vue-cli, it’s worthwhile to know how to install it yourself. As a result, you can truly know all the different aspects of this kind of Router. Firstly, we add this router to our project using npm install vue-router. Then, we include it inside our Vue instance with our src/main.js file. After that, inside src, create an src/router folder that contains an index.js file with the following contents.

 import Vue from 'vue'
import VueRouter from  'vue-router'
import Home from '../views/Home.vue'
import Profile from '../views/Profile.vue'

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

Displaying with router-view

So we have our Vue Router setup, but we still don’t have any way of actually viewing it. That’s where the <router-view> element comes in. Essentially, the router-view element gives the Router a location to render whatever component the current URL resolves to. When we run our app, we should see our home component rendering. If we click our router-link elements, the content will change and the URL will too. For example:

 <template>
<div id="app">
<router-link to='/'>Home</router-link>
<router-link to='/profile'>Profile</router-link>
<router-view />
</div>
</template>

The difference between History mode and Hash mode in Vue Router

To clarify, Vue Router has two modes for its URL – history and hash modes.

  • Hash Mode (default) – uses URL hash to simulate a URL; e.g. mypage.com/#profile
  • History – looks like a typical URL and uses history.pushState to avoid page reloads; e.g. mypage.com/profile

Handling dynamic routes

Vue Router also lets you match a URL pattern to a component instead of having to hardcode every possible route. Because of that, this is extremely useful for configuring posts, profile pages, or other content that can be dynamically created/removed. To do this, we use a colon “:” to define a dynamic path in the Vue Router as a result. For example, if we wanted to dynamically match posts, the route would look like this.

 {
  path:  '/post/:postID',
  name:  'post',
  component:  ArticlePage
}

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

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

The second method is highly recommended because it allows you to build more reusable components that are not dependent on a specific URL format. So, to do this, we only have to add props: true to our route. Then, in our component, we have to make sure that we declare a prop with the same name that we declared in our Vue Router. After adding that property, our dynamic route should look like this for instance:

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

Navigation Guards introduction

Navigation Guards are one of the more advanced topics in Vue Router. They are hooks during the routing process that let you redirect, cancel, or modify navigation. There are three types of navigation guards:

  • Global Guards
  • Per-route Guards
  • In-component Guards
Navigation Guards in Vue Router
Navigation Guards in Vue Router

So, let’s discuss the three of them and see what they are capable to do.

#1. Global Guards

There are three main global guards: router.beforeEach() – before Guards, router.afterEach() – after Hooks and router.beforeResolve() – resolve Guards. Global before guards are called in creation order, whenever navigation is triggered. Resolve guards will be called right before the navigation is confirmed, after all in component guards and async route components are resolved. Hooks do not get a next function and cannot affect the navigation.

#2. Per-route Guards

When we declare our routes in Vue Router, we can also add a beforeEnter function that acts just like the global beforeEach route, but it can contain route-specific logic. In other words, these guards have the exact same signature as global before guards.

#3. In-component Guards – the prominent ones in Vue Router

Finally, you can directly define route navigation guards inside route components (the ones passed to the router configuration) with the following options: beforeRouteEnter, beforeRouteUpdate and beforeRouteLeave. Note that beforeRouteEnter is the only guard that supports passing a callback to next. For beforeRouteUpdate and beforeRouteLeave, this is already available, so passing a callback is unnecessary and therefore not supported.

Final words

That should conclude the complete guide of Vue Router you may need to explore for your software development. All in all, routing in Vue.js makes your app so much awesome when it comes to navigation and it gives it the energies of the single page web application and it creates a better user experience. So hopefully, after reading this post, you will have the knowledge you may need for Vue Router.

We – ArrowHiTech is proud to be one of the most well-established outsourcing companies all around the world. That is to say, with over 12 years of experience, we can provide the best software development services for your eCommerce business. So, you can check us out now: ArrowHiTech services. Also, if you want to go through our showcase, you should visit our product page here: MageSolution or our portfolio: ArrowHiTech portfolio.

ArrowHiTech services

If you have any questions, don’t hesitate to contact us via email support@arrowhitech.com or our phone number +84 243 7955 813. We would love to hear every feedback from you guys.