解释vue-router组件的功能

Question

我在几个不同的地方看到了以下类型的路由定义：

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

我试图了解当时的不同之处

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

我认为这与可选添加子路由（例如/ dashboard / user）有关，因此，这里的children数组仅说明Dashboard组件呈现了/ dashboard路径，而如果我有第二段代码，那么它只能渲染/ dashboard。

我想知道的是这到底是做什么的

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

我认为这是某种形式的退化组件，但我不知道它到底是做什么的以及如何做的。

Answer 1

在Vue中，使用包含其配置的对象来创建组件。

最简单的组件可能看起来像这样

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

在某些情况下，开发人员可能不想使用template，并且希望使用纯Javascript从头开始创建元素。这就是渲染功能的所在。

Vue建议在大多数情况下使用模板来构建HTML。但是，在某些情况下，您确实需要JavaScript的全部编程功能。在这里您可以使用render函数，它是模板的更接近编译器的替代方法。

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

要将上面的示例更改为使用渲染功能：

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

他们将产生完全相同的结果：

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

换句话说，render function只是使用的替代方法template。

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

等于

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

等于

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

由于render函数是closer-to-the-compiler，因此与使用模板相比，它更快。这可能就是为什么您的代码的作者这样做的原因。