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:
route.details
to load), however, it doesn'tThe 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.
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.
To get previous page URL with Vue Router, we can get it from the from parameter of the beforeRouterEnter hook. to add the beforeRouteEnter hook into our component and get the previous page URL from the from parameter.
To reload a route with Vue Route, we can call the this. $router.go() method. If it has no arguments, then it'll reload the current route. This way, it'll notice when the path changes and it'll trigger a reload of the component with new data.
You can use $router. push({ name: "yourroutename"}) or just router. push("yourroutename") now to redirect.
The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes. To get rid of the hash, we can use the router's history mode, which leverages the history.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With