Vue Router default child route not loading initially

Question

I've setup a simple Vue (with vue-router and Vuetify) project and I'm trying to get the default child route to load when the parent route is accessed.

I've done my best to follow the Vue docs to do this, but the default child route, simply won't load when I access it's parent.

Here's the code in router.js file:

import Vue from 'vue'
import Router from 'vue-router'

import Home from './views/Home'
import Details from './views/Details'
import List from './views/List'
import NotFound from './views/NotFound'
import Secondary from './views/Secondary'
import Sections from './views/Sections'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'route.home',
      component: Home
    },
    {
      path: '/list',
      name: 'route.list',
      component: List
    },
    {
      props: true,
      path: '/sections/:id',
      name: 'route.sections',
      component: Sections,
      children: [
        {
          alias: '',
          path: 'details',
          name: 'route.details',
          component: Details
        },
        {
          path: 'secondary',
          name: 'route.secondary',
          component: Secondary
        }
      ]
    },
    {
      path: '*',
      name: 'route.notfound',
      component: NotFound
    }
  ]
})

And here's a link to the CodeSandbox.io project: https://codesandbox.io/s/l41zk6olqz

If you follow these steps in the sandbox you'll see what's happening:

1. When on the Home page, click the Go to List link
2. On the List page, click the Go to Sections link
3. When the Sections page loads, I'm expecting the default child route (named route.details to load), however, it doesn't

The Details page does load if you click the Details link in the tabs list. I'm sure this is a simple error, but I can't see the wood for the trees.

Thanks in advance.

Update (2019-04-03 @ 07:00): Some further digging, and the following seems to work: router.js

...
  {
      props: true,
      path: '/sections/:id',
      // name: 'route.sections',
      component: Sections,
      children: [
        {
          alias: '',
          path: 'details',
          name: 'route.details',
          component: Details
        },
        {
          path: 'secondary',
          name: 'route.secondary',
          component: Secondary
        }
      ]
    }
...

And then changing the router-link from :to="{ name: 'route.sections', params: { id: 1 } }" to :to="{ name: 'route.details', params: { id: 1 } }" Now resolves the default child route. Is this expected? I got the info from this SO answer: https://stackoverflow.com/a/50065601/9127864

Update (2019-04-03 @ 07:28): Even further digging shows that this is also possible: router.js

...
  {
      props: true,
      path: '/sections/:id',
      name: 'route.sections',
      component: Sections,
      redirect: {
        name: 'route.details'
      },
      children: [
        {
          alias: '',
          path: 'details',
          name: 'route.details',
          component: Details
        },
        {
          path: 'secondary',
          name: 'route.secondary',
          component: Secondary
        }
      ]
    }
...

Then I can change the router-link back to :to="{ name: 'route.sections', params: { id: 1 } }" and the default child route now loads when the user accesses the parent router.

Hopefully this will help someone else in the future.

Answer 1

Here's what I've found to work:

...
  {
      props: true,
      path: '/sections/:id',
      name: 'route.sections',
      component: Sections,
      redirect: {
        name: 'route.details'
      },
      children: [
        {
          alias: '',
          path: 'details',
          name: 'route.details',
          component: Details
        },
        {
          path: 'secondary',
          name: 'route.secondary',
          component: Secondary
        }
      ]
    }
...

Adding in redirect: { name: 'route.details' } now makes the parent route redirect to the chosen child route.

Answer 2

I think it's in the way you route the sections from the list route. I have worked out on your problem and this is my solution.

For the List.vue redirection to sections.

<router-link :to="`/sections/${1}/`">Go to Sections</router-link>

Answer 3

You can redirect from the parent route to the child route:

redirect: {
   name: 'route.details'
}

It's also possible to simply remove the name property from the parent and move it to the first child. That might spike some confusion so I'd go with option 1.

{
  alias: '',
  path: 'details',
  name: 'route.sections',
  component: Details
}