Tips for implementing multiple nested routes using Vue.js?

Question

Tips for implementing multiple nested routes using Vue.js?

Can Nested Routes be created with more than 2 levels?

I am looking to implement a structure like this:

+--------------------+
| User               |
| +----------------+ |
| | Profile        | |
| | +------------+ | |
| | | About      | | |
| | | +--------+ | | |
| | | | Detail | | | |
| | | +--------+ | | |
| | +------------+ | |
| +----------------+ |
+--------------------+

So on the website, it would look like this:

link: /localhost/user

Web Display:

USER

link: localhost/user/profile

Web Display:

USER
  PROFILE

link: localhost/user/profile/about

Web Display:

USER
  PROFILE
    ABOUT

link:

localhost/user/profile/about/detail

Web Display:

USER
  PROFILE
    ABOUT
      DETAIL

Any example code using JSFiddle would be greatly appreciated. Thank you.

javascript vue.js vuejs2 vue-component vue-router

Answer 1

Answer №1

To properly organize your routes, you simply need to nest them accordingly (ensuring the inclusion of the user's id parameter):

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          path: 'profile', component: Profile,
            children: [
              {
                path: 'about', component: About,
                  children: [
                    {
                      path: 'details', component: Details,
                    }
                  ]
              }
           ]
        }
      ]
    }
  ]
})

The same code provided above in a more concise format for better readability:

const router = new VueRouter({
  routes: [{
    path: '/user/:id', component: User,
      children: [{
        path: 'profile', component: Profile,
          children: [{
            path: 'about', component: About,
              children: [{
                path: 'details', component: Details,
              }]
          }]
      }]
   }]
})

Answer 2

To properly organize your routes, you simply need to nest them accordingly (ensuring the inclusion of the user's id parameter):

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          path: 'profile', component: Profile,
            children: [
              {
                path: 'about', component: About,
                  children: [
                    {
                      path: 'details', component: Details,
                    }
                  ]
              }
           ]
        }
      ]
    }
  ]
})

The same code provided above in a more concise format for better readability:

const router = new VueRouter({
  routes: [{
    path: '/user/:id', component: User,
      children: [{
        path: 'profile', component: Profile,
          children: [{
            path: 'about', component: About,
              children: [{
                path: 'details', component: Details,
              }]
          }]
      }]
   }]
})

Tips for implementing multiple nested routes using Vue.js?

Answer №1

Similar questions

Empty body detected in Jquery AJAX request with Django REST running in a Docker environment

Using Javascript or jQuery, focus on a div containing a paragraph element with a particular text

execute the execCommand function following an ajax request

What could be causing my jQuery script to not load properly on the first attempt?

Is it possible to retrieve all data from the Google translation API?

The dropdown menu in the navigation bar is overlapping with the datatable, creating a transparency effect

"Looking for a way to automatically close the <li> tag in Vuejs when clicked outside

How can I use ngx-editor to insert an HTML block at the current cursor position by clicking a button?

Troubleshooting ng-repeat in AngularJS: Multi checkbox filter malfunction

Finally, $.getJSON has been triggered

React Intersection Observer not functioning properly

Subscribing with multiple parameters in RxJS

Issue with the functionality of socket.io callback functions

Having trouble adding a test card to the Google Pay testing environment and calculating the order total

Uncovering the Mystery of Undefined Dom Ref Values in Vue 3 Templaterefs

Having trouble with innerHTML.value functionality?

Can we generate a JSON format that resembles the following structure?

jQuery Autocomplete - Showing array of options upon selecting input field in Internet Explorer

What could be causing issues with my application when using server-side rendered styled-components with Next.js?

The substitution of store.js with the key obtained from locale.json has been initiated