如何将 vue.js 中的子组件设置为显示为 "default"

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的路径是"/"，目的是让card1在用户进入路径“/philosophy”时加载。这在 Vue 2 中工作得很好，但在不再加载组件的 Vue 3 中就不行了。在 Vue 3 中有什么方法可以让组件 card1 被默认加载 by defautl?

预先感谢您的帮助。

Answer 1

尝试将默认路径从“/”更改为空字符串文字 ""。然后在philosophy组件中在模板中添加一个<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"
  }

如何将 vue.js 中的子组件设置为显示为 "default"

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

web-frameworks

vue.js

vue-router

vuejs3