Vue3中vue-router如何配置默认显示的子路由组件

问题原因 #

这是Vue 3配套使用的vue-router 4.x版本路由规则调整导致的。vue-router 4.x中，子路由的path如果以/开头，会被判定为根路径的绝对路由，不再继承父路由的路径前缀。你配置的子路由path: '/'实际匹配的是站点根路径/，而非父路由的/philosophy路径，因此访问/philosophy时无法匹配到对应的card1组件。

解决方案 #

官方推荐的默认子路由实现方式如下，将默认子路由的path设置为空字符串，同时所有子路由路径都去掉开头的/使用相对路径即可：

const routes = [
  {
    path: '/',
    name: "home",
    component: Home
  },
  {
    path: '/philosophy',
    component: philosophy,
    children: [{
        path: '', // 空路径默认匹配父路由地址/philosophy
        component: card1
      },
      {
        path: 'card2', // 相对路径，实际匹配/philosophy/card2
        component: card2
      },
      {
        path: 'card3',
        component: card3
      },
      {
        path: 'card4',
        component: card4
      }]
  }  
]

修改后访问/philosophy时会自动加载card1组件，其余子路由也会按照你预期的路径规则匹配。

如果更倾向于用重定向实现，也可以参考以下配置：

const routes = [
  {
    path: '/',
    name: "home",
    component: Home
  },
  {
    path: '/philosophy',
    component: philosophy,
    redirect: '/philosophy/card1', // 访问父路由直接重定向到card1的地址
    children: [{
        path: 'card1',
        component: card1
      },
      // 其余子路由同上
    ]
  }  
]

内容的提问来源于stack exchange，提问作者SDEscobedo