I have a project made in Vue.js 3, using vue-router with a configuration like this:
const routes = [
{
path: '/',
name: "home",
component: Home
},
{
path: '/philosophy',
component: philosophy,
children: [{
path: '/',
component: card1
},
{
path: '/card2',
component: card2
},
{
path: '/card3',
component: card3
},
{
path: '/card4',
component: card4
}]
}
]
Every card is loaded via router-link directive, inside of a <div> element where there is a rowter-view.
The path of card1 is "/" to intend the card1 to be loaded just when the user enters to the path "/philosophy". This works just fine in Vue 2, but not in Vue 3, where the component is not loaded anymore.
Is there any way in Vue 3 to make the component card1 to be loaded by defautl?
Thanks beforehand for the help.
Try changing the default path from '/' to empty string literal "". And then in the philosophy component add a <router-view> in the template to show the default component.
Routes:
const routes = [
{
path: '/philosphy',
component: philosophy,
children: [{
path: '', //default view
component: card1
},
{
path: '/card2',
component: card2
},
{
path: '/card3',
component: card3
},
{
path: '/card4',
component: card4
}]
}
]
philosophy component:
<template>
<router-view>
</template>
export default {
name: "Philosophy"
}