将 vue-router 组件解释为一个函数 [英] explain vue-router component as a function

问题描述

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

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
},    

我认为这与可选添加子路由(例如/dashboard/user)有关，因此这里的 children 数组只是解释了 Dashboard 组件呈现路径/dashboard 而如果我有第二段代码然后它只能渲染/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.

推荐答案

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

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);

在某些情况下，开发人员可能不想使用 template，而是希望使用纯 Javascript 从头开始​​创建元素.这就是渲染函数的用武之地.

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 建议绝大多数情况下使用模板来构建您的 HTML的情况.但是，在某些情况下，您确实需要完整的JavaScript 的编程能力.这就是你可以使用渲染的地方函数，一种更接近编译器的替代模板.

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.

来自 https://vuejs.org/v2/guide/render-function.html#基础知识

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

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

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

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

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

等于

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

等于

{
    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.

这篇关于将 vue-router 组件解释为一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！