Динамический компонент и загрузка шаблона с VueJS

Я рассматриваю VueJS на сайте несколько страниц. В официальном примере маршрут, они показывают, что вы можете динамически изменять шаблон и компонент на основе URL-адреса, но у них все еще есть все HTML-шаблоны и компоненты JS в одном файле, который загружается сразу.

мой сайт будет довольно большим, и я хочу загружать все только тогда, когда это необходимо. Поэтому мой вопрос:как я могу асинхронно загружать эти шаблоны HTML и JS компоненты по требованию при изменении URL-адреса? было бы полезно, чтобы просто показать, как приведенный выше пример маршрутизации может быть изменен для динамической загрузки скриптов.

6
javascript mvvm vue.js

2 ответов

обновление: см.Асинхронные Компоненты раздел в официальных документах.

10

жестко, но работают. Решение Webpack слишком сложно для начинающих, таких как я.

var router = new VueRouter({hashbang:false})
var routerMap = {};

router.beforeEach( function (transition) {
    var path = transition.to.path;
    if ((path != '/') && !(path in routerMap)) {
        _ajax('/reports/'+ path + '.html', function(res){//$.ajax replacement (async)
            routerMap[path] = {
                component: {
                    template: res 
                }
            }; 
            router.on(path, routerMap[path]);   //associate dynamically loaded component            

            transition.abort();     //abort current
            router.stop();                          
            router.start();         //restart router
            router.go(path);        //init new transition to the same path
        });//_ajax 
  } else 
        transition.next();          //default action for already loaded content
});
3