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

Posted 2023-02-22

【中文标题】如何将 vue.js 中的子组件设置为“默认”

【英文标题】：How to set a children compontent in vue.js to be shown as "default"

【发布时间】：2022-01-11 22:28:42

【问题描述】：

我有一个在 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 被默认加载？

在此先感谢您的帮助。

【参考方案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"
  

【讨论】：

如果他不在导航按钮中使用:to=""，它就可以工作。

@Mises 我试过了，但它破坏了代码，调用路线“/philosophy”时屏幕上什么也没有。我曾经在导航按钮中使用 =“/philosophy”，效果很好。

@SDEscobedo 使用to="philosophy"

@SDEscobedo 你错过了path:中的拼写错误