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

Question

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

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

我正在使用 vue": "^2.1.2" 和 "vue-router": "^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>

组件A.vue

<template>
  <div>
    ...
    <slot/>
  </div>
</template>

ComponentB.vue

<template>
  <div>
    <slot name="test"><slot/>
    ...
  </div>
</template>

route.js

{
  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
      }
   ]
}

我在两个组件中都没有得到槽数据。

Answer 1

插槽可以在router-view 中工作，这是肯定的 => https://codesandbox.io/s/vue-routing-example-14843

我认为问题出在您配置路线的方式上，尤其是

 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,
  },
];