How to set a children compontent in vue.js to be shown as "default"-CodePudding

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: '/philosphy',
    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.

CodePudding user response：

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"
  }