Introduction

Nuxt.js is a powerful framework for building Vue.js applications, and it provides a flexible and convenient way to create nested routes. Nested routes allow you to structure your application into hierarchical views and components. In this guide, we'll explore how to create nested routes in Nuxt.js and provide sample code to demonstrate the process.

Sample Code

Let's create a Nuxt.js application that showcases nested routes:

<div id="app">
  <router-view></router-view>
const Home = { template: '<div>Home Page</div>' };
const About = { template: '<div>About Page</div>' };
const Contact = { template: '<div>Contact Page</div>' };
const Team = { template: '<div>Our Team Page</div>' };
const Services = { template: '<div>Our Services Page</div>' };
const app = new Vue({
  el: '#app',
  router: new VueRouter({
    routes: [
      { path: '/', component: Home },
      {
        path: '/about',
        component: About,
        children: [
          { path: 'team', component: Team },
          { path: 'services', component: Services }
        ]
      },
      { path: '/contact', component: Contact }
    ]
  })
});
            

In this code:

• We create a Vue component with a `` element, which is where our nested routes will be rendered.
• We define several Vue components for different pages: Home, About, Contact, Team, and Services.
• Within the Vue instance, we set up a VueRouter with routes, including nested routes under the '/about' path.
• The `children` property in the '/about' route configuration defines the nested routes for the About page, including 'team' and 'services' sub-routes.