Caricamento dinamico di componenti e modelli con VueJS

Question

Sto considerando l'utilizzo di VueJS per un sito Web di più pagine. Nell'esempio ufficiale di routing, mostrano che è possibile modificare dinamicamente il modello e il componente in base all'URL, ma hanno ancora tutti i modelli HTML e i componenti JS in un unico file che viene caricato tutto in una volta.

Il mio sito Web sarà abbastanza grande e voglio caricare tutto solo quando richiesto. Quindi la mia domanda è: Come posso caricare in modo asincrono questi modelli HTML e componenti JS su richiesta quando l'URL viene modificato? Sarebbe utile mostrare semplicemente come l'esempio di routing precedente potrebbe essere modificato per il caricamento dinamico degli script.

Answer 1

Aggiornamento: vedere la sezione Async Components nella documentazione ufficiale.

Answer 2

Hardcoded, ma funziona. La soluzione Webpack è troppo difficile per i principianti, come me.

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