如何将 vue.js 中的子组件设置为“默认”

Question

我有一个在 Vue.js 3 中制作的项目，使用带有如下配置的 vue-router：

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

每张卡片都是通过router-link 指令加载的，在<div> 元素内部，其中有一个rowter-view。

card1 的路径是"/"，目的是在用户进入路径“/philosophy”时加载 card1。这在 Vue 2 中工作得很好，但在 Vue 3 中却不行，组件不再加载。 Vue 3 中有什么方法可以让组件card1 被默认加载？

在此先感谢您的帮助。

Answer 1

尝试将默认路径从“/”更改为空字符串文字""。然后在哲学组件中在模板中添加<router-view> 以显示默认组件。

路线：

const routes = [
  {
    path: '/philosphy',
    component: philosophy,
    children: [{
        path: '',  //default view
        component: card1
      },
      {
        path: '/card2',
        component: card2
      },
      {
        path: '/card3',
        component: card3
      },
      {
        path: '/card4',
        component: card4
      }]
  }  
]

哲学成分：

 <template>
    <router-view>
    </template> 
    export default {
    name: "Philosophy"
  }