I’m currently trying to figure out how the Vue.js routing works. I feel like this should be the right approach when creating nested routes with multiple parameters:

{
  path: 'campus-list',
  name: 'campus-list',
  component: CampusList,
  children: [
    {
      path: ':campusId',
      name: 'campus-detail',
      component: CampusDetail,
      children: [
        {
          path: ':localityId',
          name: 'locality-detail',
          component: LocalityDetail,
        }
      ]
    }
  ]
}

The routing in of itself works, my route changes as soon as I click the link. However, somehow the only way for me to get this to work and actually change the view is like this:

{
  path: 'localities',
  component: Localities,
  children: [
    {
      path: '',
      name: 'campus-list',
      component: CampusList,
    },
    {
      path: ':campusId',
      component: Campus,
      children: [
        {
          path: '',
          name: 'campus-detail',
          component: CampusDetail,
        },
        {
          path: ':localityId',
          name: 'locality-detail',
          component: LocalityDetail,
        }
      ]
    }
  ]
}

I’ve copied this approach from here but I really don’t get how this is the right thing to do. If I want my routes to work like that I’d need like 6 views to properly route through 3 pages, which can’t be correct, right? Can someone please explain to me where I’m doing something wrong?