объяснить компонент vue-router как функцию

Question

Я видел в нескольких разных местах следующий тип определения маршрута:

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

Я пытаюсь понять, чем это отличается от

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

Я думаю, что это связано с необязательным добавлением дочерних маршрутов (например, / dashboard / user), так что массив потомков просто объясняет, что компонент 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. Вот где вы можете использовать рендер функция, альтернатива шаблонам ближе к компилятору.

из 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>`
    }
}

Поскольку функция рендеринга closer-to-the-compiler, она быстрее по сравнению с использованием шаблона. Вероятно, поэтому автор вашего кода делает это так.

Answer 2

Я не знаю остальную часть вашего кода, но похоже, что это может быть реализация функции vue-router Lazy Loading . По сути, Vue + Webpack собирается разбить ваш код на куски и загружать эти куски только тогда, когда пользователь пытается перейти к этим маршрутам, а не загружать их все и создавать для загрузки больший пакет, чем необходимо.

При создании приложений с помощью пакета пакет JavaScript может стать довольно большим и, следовательно, повлиять на время загрузки страницы. Было бы более эффективно, если бы мы могли разделить компоненты каждого маршрута на отдельный фрагмент и загружать их только при посещении маршрута.

Сочетая функцию асинхронного компонента Vue и функцию разбиения кода в веб-пакете, тривиально легко загружать компоненты маршрута.