加载子组件的Vue-router问题

Question

我有一个问题。 我和孩子一样有这样的路由器。

  {
    component: () => import('@/components/roles/Index'),
    path: '/roles',
    name: 'roles.index',
    meta: {
      auth: true,
      roles: ['admin']
    },
    children: [{
      component: () => import('@/components/roles/Show'),
      path: ':id',
      name: 'roles.show',
      meta: {
        auth: true,
        roles: ['admin']
    }
  }]}

当我点击按钮时，网址正在变化，但组件未加载。

<v-btn icon class="mx-0" :to="{ name: 'roles.show', params: { id: props.item.id }}">
  <v-icon color="blue">info</v-icon>
</v-btn>

但是当我这样做时，一切正常

{
  component: () => import('@/components/roles/Index'),
  path: '/roles',
  name: 'roles.index',
  meta: {
    auth: true,
    roles: ['admin']
  }
},
{
  component: () => import('@/components/roles/Show'),
  path: '/roles/:id',
  name: 'roles.show',
  meta: {
    auth: true,
    roles: ['admin']
  }
}

Answer 1

逻辑上，path只能包含param。 path: ':id'会匹配所有内容，这是有问题的。