Question

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

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

我试图理解这是如何不同的

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

我认为这与可选添加子路径（例如/ dashboard / user）有关，因此这里的children数组只是解释了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的程序化力量。这就是你可以使用渲染的地方   函数，一种更接近编译器的替代模板。

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

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

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

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

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

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

等于

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

等于

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

因为渲染功能是closer-to-the-compiler，所以与使用模板相比，它更快。这可能是你的代码的作者以这种方式做到的原因。

Answer 2

我不知道你的其余代码，但看起来这可能是vue-router Lazy Loading functionality的一个实现。基本上，Vue + Webpack将把代码拆分成块，只在用户尝试导航到那些路由时加载这些块，而不是加载它们并创建一个更大的束来下载而不是必要的。

使用bundler构建应用程序时，JavaScript包可能会变得非常大，从而影响页面加载时间。如果我们可以将每个路由的组件拆分成一个单独的块，并且只在访问路径时加载它们，那么效率会更高。

结合Vue的异步组件功能和webpack的代码分割功能，懒得加载路由组件非常容易。

将vue-router组件解释为一个函数

2 个答案: