一个简单的vue router 异步组件的问题

2018-03-24 09:59:35vue.js,vue-router问题

一个简单的异步组件加载,放入router控制,无法显示。不知所以然,哪里出了问题?

<div id="app">
  <router-view></router-view>
</div>
<script>
	var User = new Promise(function(resolve, reject){
			setTimeout(function(){
				resolve({
					template:'<div>demo1</div>',
				});
			},1000)
		});
	var router = new VueRouter({
	  	routes: [
	    	{ path: '/', component: User }
	  	]
	});
	new Vue({
		el:'#app',
		router,
		data:{}
	});
</script>

网友回答:

  • jsoncode jsoncode 2018-3-26 11:08 回复:
    已被采纳

网上没找到browser端的异步组件的例子。我自己废了几天时间搜索,阅读各种文档。整理了一个最简洁的demo:

var User = Vue.component('user',function(resolve){
    var localCom = localStorage.getItem('user');
    if(localCom){
        resolve(JSON.parse(localCom));
    }else{
        setTimeout(function(){
            var obj = {
                template:'<div>demo1</div>',
            };
            resolve(obj);
            localStorage.setItem('user',JSON.stringify(obj));
        },1000);
    }

});
var router = new VueRouter({
routes: [
{ path: '/', component: User }
]
});
new Vue({
el:'#app',
router,
data:{}
});

很多人都告诉我怎么怎么样用webpack配置,打包之类的话,我就想用browser端直接加载的方式来实现。这些打包工具无非也是一个思路。帮你做了一些基础工作罢了。只是很多人没有深入研究打包过程。

现在很多人如果离开这些打包工具,根本不知道怎么开发项目了。这就违背了打包工具的初衷了。


  • 深夜路灯_ 深夜路灯_ 2018-3-24 10:10 回复:

    实现异步组件加载比较常用的方法是用webpack配置懒加载,然后在路由配置异步组件,即可完成。 可参考博文 https://blog.csdn.net/Wbiokr/...

    • jsoncode jsoncode 2018-3-24 12:39 回复:深夜路灯_
      不用webpack难道就不能实线异步组件吗?