用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加载动态组件和模板

回答

相关问题