用VueJS加載動態組件和模板

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

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

2014-09-29 Miguel

更新：請參閱官方文檔中的Async Components部分。

2014-10-01 16:01:07

你好，埃文。 vue.js現在是否有類似templateUrl的內容？我只能找到像使用webpack一樣的東西。這將受到部署環境的限制。例如。我有一個用GitHub頁面上的Angular構建的網站，沒有預先構建，當我將源代碼推送到GitHub時，所有內容都是最新的。這是我無法使用webpack的典型意義。 – kxxoling 2015-10-10 11:06:52

現在鏈接已損壞。有更新的例子嗎？ – 2016-10-08 05:55:58

因爲鏈接（就像這個）打破了，所以將實際的代碼添加到我們知道它會持續的答案中是很有用的。 – ToothlessRebel 2016-11-16 15:13:27

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

來源

2015-12-09 15:59:40

用VueJS加載動態組件和模板

回答

相關問題