使用 VueJS 动态加载组件和模板答案

【问题标题】：Dynamic component and template loading with VueJS使用 VueJS 动态加载组件和模板
【发布时间】：2014-11-23 11:16:30
【问题描述】：

我正在考虑将 VueJS 用于多页面网站。在routing的官方示例中，他们展示了您可以根据URL动态更改模板和组件，但他们仍然将所有HTML模板和JS组件放在一个文件中，一次加载。

我的网站将非常大，我只想在需要时加载所有内容。所以我的问题是：当 URL 改变时，on demand 如何异步加载这些 HTML 模板和 JS 组件？可以修改为动态脚本加载。

【问题讨论】：

标签： javascript mvvm vue.js

【解决方案1】：

更新：请参阅官方文档中的Async Components 部分。

【讨论】：

你好，埃文。 vue.js 现在有类似 templateUrl 的东西吗？我只能找到与 webpack 一起使用的东西。这将受到部署环境的限制。例如。我在 GitHub 页面上有一个使用 Angular 构建的网站，没有预先构建，当我将源代码推送到 GitHub 时，一切都是最新的。这是我无法使用 webpack 的典型感觉。
因为链接（比如这个）会中断，所以在我们知道它将持续存在的答案中添加实际代码很有用。

【解决方案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
});

【讨论】：