Introduction to Routing in VueJS Using Vue Router

Vue Router is the official router for VueJS, enabling you to build single-page applications with navigation between different views. This guide covers the basics of using Vue Router, including setting up routes, navigating between routes, and understanding the benefits of using Vue Router.

Setting Up Vue Router

Installation

Install Vue Router using npm or yarn:

// Using npm
npm install vue-router

// Using yarn
yarn add vue-router

Basic Configuration

Set up Vue Router in your VueJS application:

// JavaScript
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

Basic Usage

Router View and Router Link

Use the <router-view> component to render matched components and <router-link> for navigation:

Dynamic Routes

Defining Dynamic Routes

Define dynamic routes to handle different parameters:

// JavaScript
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/user/:id', component: User }
];

// User component
const User = {
  template: '
User ID: {{ $route.params.id }}
'
};

User 123
User 456
                

Nested Routes

Defining Nested Routes

Define nested routes to create nested views:

// JavaScript
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/user/:id', component: User,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
];

// User component with nested views
const User = {
  template: `
    

      
User ID: {{ $route.params.id }}
      
    
  `
};

User 123 Profile
User 123 Posts
                

Navigation Guards

Defining Navigation Guards

Use navigation guards to control access to routes:

// JavaScript
const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  if (to.path === '/about' && !isAuthenticated()) {
    next('/');
  } else {
    next();
  }
});

function isAuthenticated() {
  // Check if the user is authenticated
  return true; // Replace with actual authentication check
}

Best Practices

Follow these best practices when using Vue Router in VueJS:

• Keep Routes Simple: Keep your routes simple and intuitive to make navigation easier for users.
• Use Nested Routes for Nested Views: Use nested routes to create nested views and maintain a clean and organized route structure.
• Secure Routes with Navigation Guards: Use navigation guards to secure routes and control access based on user authentication and authorization.
• Document Route Configuration: Document your route configuration to make your code easier to understand and maintain.

Example Application

Here is an example application that demonstrates using Vue Router in VueJS:

  
Vue Router Basics Example
  
  




                

Summary

This guide provided an overview of using Vue Router in VueJS, including setting up routes, navigating between routes, defining dynamic and nested routes, using navigation guards, and following best practices. By understanding and utilizing these features, you can create robust and maintainable single-page applications with VueJS and Vue Router.