Vue: the Named Slots have not work in router-view

[johonz]

Version

2.2.6

Reproduction link

https://jsfiddle.net/johonz/nuuyjuwk/3/

Steps to reproduce

1. insert some els in router-view,and set property 'slot'
2. use slot tag in router views

html

<div id="app">
  <router-view>
    <div slot='a'>
      The Slot A
    </div>
    <div slot='b'>
      The Slot B
    </div>
    <div slot='c'>
      the Slot C
    </div>
  </router-view>
</div>

javascript:

const Home = {
  template: '<div>'
      '<h1 style="color:#2973b7">question:the Named Slots have not effect in router-view</h1>'
        '<h2>the named slots below:</h2>'
        '<slot name="a"></slot>'
      '<slot name="b"></slot>'
      '<slot name="c"></slot>'
      '<b style="color:red;">why empty?</b>'
      '</div>'
}
const router = new VueRouter({
  history: false,
  routes: [{
    path: '/',
    component: Home
  }]
});

new Vue({
  el: '#app',
  router: router
})

example:https://jsfiddle.net/johonz/nuuyjuwk/3/

What is expected?

the named slot can support in router-view

What is actually happening?

it cause the slot can't show in router views

[posva]

That's expected because there're no named slots on the router-view component. You should check the docs for more help or ask questions on the forum or StackOverflow. In your example you have to remove the slot=... part because the router-view component only uses the default slot

[yyx990803]

Technically this should work since router-view is just a functional component that renders the inner route component. Needs more investigation, but should probably be posted to the vue-router repo instead.

[posva]

Well, it's true that since scopedSlots are passed in the data object, they can be passed down while slots is an extra argument and therefore cannot. Maybe slots should be included in the data object in functional components?
http://jsfiddle.net/ukfdwukg/

[yyx990803]

This has been addressed in [email protected]. Technically, it is expected behavior for functional components to not forward named slots downwards, but it is a useful behavior for <router-view> so we enabled it.

[fourpixels]

I cannot seem to understand how named slots should be used along with router-view. I know this is part of the router, but there is nothing on this topic there. @yyx990803 can you provide with some details please?

Thanks in advance!