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

I don't know the rest of your code, but it looks like this might be an implementation of the vue-router Lazy Loading functionality. Basically, Vue + Webpack are going to split your code into chunks and only load those chunks whenever the user attempts to navigate to those routes, rather than loading them all and creating a bigger bundle to download than necessary.

When building apps with a bundler, the JavaScript bundle can become quite large, and thus affect the page load time. It would be more efficient if we can split each route's components into a separate chunk, and only load them when the route is visited.

Combining Vue's async component feature and webpack's code splitting feature, it's trivially easy to lazy-load route components.

Answer 2

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://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.