VueJS Routing

Introduction

VueJS Routing is a way of navigating between pages of a Single Page Application (SPA) without reloading the page. Vue Router is the official router library for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze.

Syntax

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

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    }
  ]
})

Example

Consider a simple VueJS SPA where we want to navigate between Home and About pages. Here’s how to set up routing.

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

<script>
export default {
  name: 'App',
}
</script>

<style>
  /* Add your styles here */
</style>

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router // Adding router instance
}).$mount('#app')

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('./views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Output

When the application runs, it displays a Home and About page link. On clicking each link, the router extracts the path from the URL and renders the corresponding component without reloading the page.

Explanation

The code creates a new Vue Router instance, passes the routing configuration to it and also registers it with our Vue application using Vue.use(VueRouter) method. Once registered, it creates an instance of VueRouter, which is passed to the Vue instance through the main.js file.

Here, we create two routes, which are objects defining a path and its corresponding component. We use dynamic import syntax to allow Webpack to lazy load the component when needed.

In the HTML file, we use the router-link component provided by Vue Router to create navigation between the links. The router-view component is used to display the component associated with the current route.

Use

VueJS Routing can be used to create navigation between pages of an SPA without reloading, and also to load components on demand. It can enhance the user experience and performance of the application.

Important Points

• Vue Router integrates with the core Vue API.
• Vue Router navigates without reloading the page.
• Vue Router provides components to create navigation links and display routed components.
• Vue Router can define dynamic routes that extract URL parameters.
• Vue Router can also use lazy loading with Webpack to improve the performance.

Summary

VueJS Routing is an important part of creating Single Page Applications. The official Vue Router library deeply integrates with Vue.js core to make building SPAs a seamless experience. Understanding the basic configuration, syntax and use cases for Vue Router can greatly enhance the functionality of your application.