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

Javascript 使用VueJS动态加载组件和模板,javascript,mvvm,vue.js,Javascript,Mvvm,Vue.js,我正在考虑将VueJS用于多页面网站。在的官方示例中,它们显示您可以根据URL动态更改模板和组件,但它们仍然将所有HTML模板和JS组件放在一个文件中,一次加载所有这些文件 我的网站将是相当大的,我想加载一切只有在需要的时候。因此,我的问题是:当URL发生更改时,如何按需异步加载这些HTML模板和JS组件?只要展示如何修改上面的路由示例以进行动态脚本加载,就会有所帮助 更新:见官方文件中的章节。硬编码,但工作正常。对于像我这样的初学者来说,网页包解决方案太难了 var router = new

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


我的网站将是相当大的,我想加载一切只有在需要的时候。因此,我的问题是:当URL发生更改时,如何按需异步加载这些HTML模板和JS组件?只要展示如何修改上面的路由示例以进行动态脚本加载,就会有所帮助

更新:见官方文件中的章节。

硬编码,但工作正常。对于像我这样的初学者来说,网页包解决方案太难了

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

你好,埃文。vue.js现在是否获得了类似templateUrl的内容?我只能找到与webpack一起使用的东西。这将受到部署环境的限制。我有一个在GitHub页面上使用Angular构建的站点,没有预构建,当我将源代码推送到GitHub时,一切都是最新的。这是一种典型的感觉,我不能使用webpack。因为链接(像这一个)会断开,所以在答案中添加实际代码非常有用,因为我们知道它会持续。