Nested Routes in Vue Router

What You’ll Learn 📚

• Understanding the core concept of nested routes
• Key terminology and definitions
• Simple and progressively complex examples
• Common questions and troubleshooting tips

Introduction to Nested Routes

In Vue Router, nested routes allow you to create a hierarchy of routes, which is perfect for applications with complex navigation structures. Think of it like a tree where each branch can have its own sub-branches. 🌳 This is especially useful for creating layouts where different sections of a page need to be displayed based on the route.

Key Terminology

• Route: A path that corresponds to a component in your application.
• Nested Route: A route that is defined within another route, creating a parent-child relationship.
• Router View: A placeholder component that renders the component for the current route.

Simple Example: Setting Up Vue Router

// Step 1: Install Vue Router if you haven't already
// Run this command in your terminal
npm install vue-router

// Step 2: Create a simple Vue application with Vue Router
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// Define some components
template: '
Home
' };
const About = { template: '
About
' };
const User = { template: '
User 
' };
const UserProfile = { template: '
User Profile
' };

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

// Create the router instance
const router = new VueRouter({
  routes // short for `routes: routes`
});

// Create and mount the root instance
new Vue({
  router
}).$mount('#app');

Progressively Complex Examples

Example 1: Adding More Nested Routes

// Additional nested routes
const UserPosts = { template: '
User Posts
' };
const UserSettings = { template: '
User Settings
' };

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

Example 2: Dynamic Nested Routes

// Dynamic route for user profiles
const UserProfile = { template: '
User Profile for {{ $route.params.id }}
' };

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

Common Questions & Answers

1. What is the purpose of nested routes?

   Nested routes help organize complex applications by allowing components to be nested within each other, reflecting the application’s structure.

2. How do I access parameters in a nested route?

   You can access parameters using $route.params within your component.

3. Why isn’t my nested route rendering?

   Ensure that you have a <router-view> in the parent component where the nested route should render.

Troubleshooting Common Issues

Ensure that each parent route has a <router-view> to render its children. Without it, nested routes won’t display.

If your routes aren’t working as expected, double-check the paths and ensure they match exactly with the defined routes.

Practice Exercises

• Create a nested route structure for a blog application with routes for posts, authors, and comments.
• Try adding a dynamic route to display a specific post based on its ID.

For more information, check out the Vue Router documentation on nested routes.