一个简单的异步组件加载,放入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 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 2018-3-24 12:39 回复:深夜路灯_
不用webpack难道就不能实线异步组件吗?