使用 VueJS 動態加載組件和模板

Question

我正在考慮將 VueJS 用於多頁網站。 在官方的路由示例中，它們表明您可以根據 URL 動態更改模板和組件，但它們仍然將所有 HTML 模板和 JS 組件放在一個文件中，一次加載。

我的網站將非常大，我只想在需要時加載所有內容。 所以我的問題是：當 URL 發生變化時，如何按需異步加載這些 HTML 模板和 JS 組件？ 僅展示如何修改上述路由示例以進行動態腳本加載會很有幫助。

Answer 1

更新：請參閱官方文檔中的 異步組件部分。

Answer 2

硬編碼，但工作。 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
});