Vue Router 4, the official router for Vue 3, provides a powerful way to define and manage dynamic routes and nested routing structures. This article will guide you through the basics of dynamic route matching and nested routes, offering practical examples to help you build robust and scalable navigation for your Vue 3 application.
What is Dynamic Route Matching?
Dynamic route matching allows you to define routes that can accept variable segments in their paths. For example, consider a blog application where you want to display individual posts based on their unique IDs. Instead of creating separate routes for each post, you can use a dynamic segment in your route path.
Setting Up Dynamic Routes
To define a dynamic route, include a colon (:) before the variable segment in your route definition. For example:
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/posts/:id',
name: 'PostDetail',
component: () => import('@/views/PostDetail.vue'),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
In this example:
/posts/:idis the dynamic route.:idis the placeholder for the variable segment. Any value entered after/posts/will be captured as theidparameter.
Accessing Route Parameters
You can access the dynamic segment values in the target component using the $route.params object. For instance:
<template>
<div>
<h1>Post Details</h1>
<p>Post ID: {{ postId }}</p>
</div>
</template>
<script>
export default {
computed: {
postId() {
return this.$route.params.id;
},
},
};
</script>
Nested Routes
Nested routes allow you to structure routes hierarchically, enabling complex layouts and component reuse. For example, consider a scenario with a user profile and subpages like “Overview” and “Settings.”
Defining Nested Routes
const routes = [
{
path: '/user/:id',
component: () => import('@/views/UserProfile.vue'),
children: [
{
path: 'overview',
name: 'UserOverview',
component: () => import('@/views/UserOverview.vue'),
},
{
path: 'settings',
name: 'UserSettings',
component: () => import('@/views/UserSettings.vue'),
},
],
},
];
Here:
- The
UserProfilecomponent acts as a parent layout. - The
UserOverviewandUserSettingscomponents are nested within the/user/:idroute.
Using <router-view> for Nested Routes
In the UserProfile.vue component, include a <router-view> element to render the nested components:
<template> <div> <h1>User Profile</h1> <router-view></router-view> </div> </template>
Navigating Between Nested Routes
You can use <router-link> to navigate between nested routes:
<template>
<div>
<nav>
<router-link :to="{ name: 'UserOverview', params: { id: userId } }">Overview</router-link>
<router-link :to="{ name: 'UserSettings', params: { id: userId } }">Settings</router-link>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
props: ['userId'],
};
</script>
Catch-All Routes
For handling routes that don’t match any defined paths, use a catch-all route. This is useful for creating custom 404 pages.
const routes = [
{
path: '/:catchAll(.*)',
name: 'NotFound',
component: () => import('@/views/NotFound.vue'),
},
];
Benefits of Dynamic and Nested Routes
- Scalability: Easily handle variable segments for complex apps.
- Reusability: Use common layouts and components for related routes.
- Maintainability: Organize routes hierarchically for better structure.
Conclusion
Dynamic route matching and nested routes in Vue Router 4 offer powerful tools for managing navigation in Vue 3 applications. By leveraging these features, you can build highly dynamic, flexible, and user-friendly routing structures. Whether you’re working with variable segments or creating hierarchical navigation, Vue Router 4 makes the process intuitive and efficient.
Start experimenting with dynamic and nested routes in your projects to unlock the full potential of Vue 3 routing!