Mastering Vue 3: A Comprehensive Guide to Building Modern Web Applications <Part 9 />

Content:

1. Mastering Vue 3 - Part 1 [Introduction and key features]

2. Mastering Vue 3 - Part 2 [Benefits of using Vue 3 for web development]

3. Mastering Vue 3 - Part 3 [Template syntax in Vue 3]

4. Mastering Vue 3 - Part 4 [Reactivity Fundamentals]

5. Mastering Vue 3 - Part 5 [Class and Style Bindings]

6. Mastering Vue 3 - Part 6 [Lifecycle Hooks]

7. Mastering Vue 3 - Part 7 [Understanding components]

8. Mastering Vue 3 - Part 8 [Installing Vue project and file structure]

9. Mastering Vue 3 - Part 9 [Vue Router in Vue 3]

10. Mastering Vue 3 - Part 10 [Animation in Vue 3]

11. Mastering Vue 3 - Part 11 [State Management with Pinia]

12. Mastering Vue 3 - Part 12 [Teleport in Vue 3]

13. Mastering Vue 3 - Part 13 [Working with API Calls ]

14. Mastering Vue 3 - Part 14 [Forms and Form Validation ]

---

Vue Router in Vue 3

Vue Router is a powerful routing library for Vue.js applications that allows you to build single-page applications (SPAs) with multiple views. It provides a seamless navigation experience by organizing your application into different routes, each representing a unique URL. In this blog post, we will explore the fundamentals of Vue Router in Vue 3 and provide examples, including nested routes, to help you understand its usage and capabilities.

(1) Getting Started with Vue Router:
To begin, you need to install Vue Router into your Vue 3 project. Open your terminal and run the following command:

npm install vue-router@next

Next, import Vue Router into your main.js file:

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // Define your routes here
  ],
});

const app = createApp(App);
app.use(router);
app.mount('#app');

(2) Defining Routes:
Routes are the building blocks of Vue Router. Each route represents a unique URL and maps to a specific component. Let's take a look at an example:

import Home from './components/Home.vue';
import About from './components/About.vue';

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

In this example, we have two routes: the root route ("/") mapped to the Home component and the "/about" route mapped to the About component.

(3) Rendering Views:
To display the appropriate component for each route, we need to render the <router-view> component in the template of our main App.vue file:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

The <router-view> component acts as a placeholder that Vue Router will replace with the component associated with the current route.

(4) Navigating Between Routes:
Vue Router provides a <router-link> component to create links for navigation. Here's an example:

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

Clicking on these links will navigate the user to the respective routes.

(5) Nested Routes:
Vue Router also supports nested routes, allowing you to create hierarchical navigation structures. To define nested routes, you can include a children property within a route configuration object. Here's an example:

import Dashboard from './components/Dashboard.vue';
import Profile from './components/Profile.vue';
import Settings from './components/Settings.vue';

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      {
        path: 'profile',
        component: Profile,
      },
      {
        path: 'settings',
        component: Settings,
      },
    ],
  },
];

In this example, the "/dashboard" route is associated with the Dashboard component, and it contains two child routes: "/dashboard/profile" and "/dashboard/settings".

(6) Accessing Route Parameters:
In many cases, you might need to pass parameters to your routes. Vue Router allows you to define dynamic segments in your route paths and access them in your components. Here's an example:

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User,
  },
];

In the User component, you can access the id parameter through this.$route.params.id.

(7) Programmatic Navigation:
You can also navigate programmatically using the router.push() method. Here's an example:

router.push('/about');

This code will navigate the user to the "/about" route.

Conclusion:
Vue Router is an essential tool for building SPAs in Vue 3. By defining routes, rendering views, and navigating between them, you can create a seamless and interactive user experience. Nested routes provide a way to create hierarchical navigation structures within your application. In this blog post, we covered the basics of Vue Router, including nested routes, and provided examples to help you get started. With this knowledge, you can take your Vue 3 projects to the next level by implementing routing capabilities.