The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Nested Routes

Next ►
►

In this section, we will explore nested routes in Vue Router. Nested routes allow you to create complex routing structures by nesting child routes within parent routes. This is particularly useful for creating multi-level navigation in your Vue.js applications.

Key Concepts

  1. Parent and Child Routes: Define routes within other routes to create a hierarchy.
  2. Nested <router-view>: Use multiple <router-view> components to display nested routes.
  3. Route Configuration: Configure nested routes in the Vue Router instance.

Setting Up Nested Routes

Step 1: Install Vue Router

If you haven't already installed Vue Router, you can do so using npm or yarn:

npm install vue-router
# or
yarn add vue-router

Step 2: Define Nested Routes

Let's define a set of nested routes. Consider a scenario where you have a User component with nested routes for Profile and Posts.

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import User from '@/components/User.vue';
import UserProfile from '@/components/UserProfile.vue';
import UserPosts from '@/components/UserPosts.vue';

Vue.use(Router);

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

const router = new Router({
  routes
});

export default router;

Step 3: Create Components

Create the User, UserProfile, and UserPosts components.

<!-- User.vue -->
<template>
  <div>
    <h2>User {{ $route.params.id }}</h2>
    <router-view></router-view> <!-- Nested <router-view> -->
  </div>
</template>

<script>
export default {
  name: 'User'
};
</script>
<!-- UserProfile.vue -->
<template>
  <div>
    <h3>User Profile</h3>
    <p>This is the user profile page.</p>
  </div>
</template>

<script>
export default {
  name: 'UserProfile'
};
</script>
<!-- UserPosts.vue -->
<template>
  <div>
    <h3>User Posts</h3>
    <p>This is the user posts page.</p>
  </div>
</template>

<script>
export default {
  name: 'UserPosts'
};
</script>

Step 4: Use Nested Routes in the Application

Update your main application file to use the router.

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/user/123/profile">Go to User Profile</router-link>
    <router-link to="/user/123/posts">Go to User Posts</router-link>
    <router-view></router-view>
  </div>
</template>

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

Step 5: Run the Application

Run your Vue.js application to see the nested routes in action.

npm run serve
# or
yarn serve

Practical Exercise

Exercise: Create Nested Routes for a Blog

  1. Objective: Create a Blog component with nested routes for PostList and PostDetail.
  2. Steps:
    • Define the Blog, PostList, and PostDetail components.
    • Configure nested routes in the Vue Router instance.
    • Use nested <router-view> to display the nested routes.

Solution

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Blog from '@/components/Blog.vue';
import PostList from '@/components/PostList.vue';
import PostDetail from '@/components/PostDetail.vue';

Vue.use(Router);

const routes = [
  {
    path: '/blog',
    component: Blog,
    children: [
      {
        path: '',
        component: PostList
      },
      {
        path: ':postId',
        component: PostDetail
      }
    ]
  }
];

const router = new Router({
  routes
});

export default router;
<!-- Blog.vue -->
<template>
  <div>
    <h2>Blog</h2>
    <router-view></router-view> <!-- Nested <router-view> -->
  </div>
</template>

<script>
export default {
  name: 'Blog'
};
</script>
<!-- PostList.vue -->
<template>
  <div>
    <h3>Post List</h3>
    <p>This is the post list page.</p>
  </div>
</template>

<script>
export default {
  name: 'PostList'
};
</script>
<!-- PostDetail.vue -->
<template>
  <div>
    <h3>Post Detail</h3>
    <p>This is the post detail page for post {{ $route.params.postId }}.</p>
  </div>
</template>

<script>
export default {
  name: 'PostDetail'
};
</script>

Summary

In this section, we learned how to set up nested routes in Vue Router. We covered:

  • Defining parent and child routes.
  • Using nested <router-view> components.
  • Configuring nested routes in the Vue Router instance.

Nested routes are a powerful feature that allows you to create complex and hierarchical navigation structures in your Vue.js applications. In the next section, we will explore navigation guards to control access to routes.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved