explain vue-router component as a function

Question

I have seen in several different places the following type of route definition:

{   path : '/dashboard',
    component: { render (c) { return c('router-view') }},
    children:[{
            path:"",
            component: Dashboard
        }]
},    

I am trying to understand how this is different then

{   path : '/dashboard',
    component: Dashboard
},    

I think it is related to the optional addition of child routs (e.g. /dashboard/user) so that and the children array here just explains that the Dashboard component renders the path /dashboard whereas if I had the second piece of code then it can only render /dashboard.

What I do want to know is what exactly this does

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

I assume this is some form of a degenerated component but I don't understand what exactly does it do and how.

Answer 1

In Vue, a component is created using an object containing its configuration.

The simplest possible component may look something like this

componentConfig = {
    template: '<div>test</div>'
};    
Vue.component('test', componentConfig);

In some cases, a developer might not want to use template, and would want to create element from scratch using pure Javascript. That's where render function comes in.

Vue recommends using templates to build your HTML in the vast majority of cases. There are situations however, where you really need the full programmatic power of JavaScript. That’s where you can use the render function, a closer-to-the-compiler alternative to templates.

from https://v2.vuejs.org/v2/guide/render-function.html#Basics

To change the example above to using render function:

componentConfig = {
    render: function(createElement) {
        return createElement('div', 'test')
    }
};
Vue.component('test', componentConfig);

They would produce the exact same result:

• https://codepen.io/jacobgoh101/pen/ZoKwKb?editors=1010
• https://codepen.io/jacobgoh101/pen/PemVmy?editors=1010

In other words, render function is simply an alternative to using template.

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

is equal to

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

is equal to

{
    component: {
        template: `<router-view></router-view>`
    }
}

Because render function is closer-to-the-compiler, it's faster compared to using template. That's probably why the author of your code does it this way.