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:
- When on the Home page, click the Go to List link
- On the List page, click the Go to Sections link
- 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.