Vue.js 如何在路由器视图中使用插槽

我试图在路由器视图中使用插槽，但无法在子组件中获取插槽数据

我搜索了很多，这似乎在单一的js文件工作。 但是，当我在单独的文件组件中使用slot时，它对我不起作用

我正在使用vue“^2.1.2”和“vue路由器“^3.0.2” 我尝试过以下代码：

AppContainer.vue

<router-view>
  <p> This is a default slot</p>
  <p slot="test"> This is a named slot</p>
</router-view>

---

两个组件中都没有插槽数据。

插槽可以在

路由器视图中工作，这是肯定的=>

我相信出错的是你配置路线的方式，尤其是

 component: {
     render(c) {
       return c('router-view')
     }
  },

如果希望父组件不呈现任何内容，则分离路径配置会更简单


[
  // ...
  {
    path: '/performance',
    redirect: '/performance/evaluator',
  },
  {
    path: '/performance/evaluator',
    name: 'ComponentA',
    component: ComponentA,
  },
  {
    path: '/performance/management',
    name: 'ComponentB',
    component: ComponentB,
  },
];

@jacob joh您是对的，问题出现在上面提到的块中。我可以使用以下方法解决此问题：组件：{template:
}
{
  path: '/performance',
  redirect: '/performance/evaluator',
  component: {
     render(c) {
       return c('router-view')
     }
  },
  children: [
     {
       path: 'evaluator',
       name: 'ComponentA',
       component: ComponentA
      },
      {
        path: 'management',
        name: 'ComponentB',
        component: ComponentB
      }
   ]
}

 component: {
     render(c) {
       return c('router-view')
     }
  },


[
  // ...
  {
    path: '/performance',
    redirect: '/performance/evaluator',
  },
  {
    path: '/performance/evaluator',
    name: 'ComponentA',
    component: ComponentA,
  },
  {
    path: '/performance/management',
    name: 'ComponentB',
    component: ComponentB,
  },
];