鍍金池/ 問(wèn)答/HTML/ 一個(gè)簡(jiǎn)單的vue router+ 異步組件的問(wèn)題

一個(gè)簡(jiǎn)單的vue router+ 異步組件的問(wèn)題

一個(gè)簡(jiǎn)單的異步組件加載，放入router控制，無(wú)法顯示。不知所以然，哪里出了問(wèn)題？

<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>
回答
編輯回答
扯不斷

實(shí)現(xiàn)異步組件加載比較常用的方法是用webpack配置懶加載，然后在路由配置異步組件，即可完成。 可參考博文 https://blog.csdn.net/Wbiokr/...

2017年9月4日 03:46
編輯回答
我以為

網(wǎng)上沒(méi)找到browser端的異步組件的例子。我自己廢了幾天時(shí)間搜索，閱讀各種文檔。整理了一個(gè)最簡(jiǎn)潔的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端直接加載的方式來(lái)實(shí)現(xiàn)。這些打包工具無(wú)非也是一個(gè)思路。幫你做了一些基礎(chǔ)工作罷了。只是很多人沒(méi)有深入研究打包過(guò)程。

現(xiàn)在很多人如果離開(kāi)這些打包工具，根本不知道怎么開(kāi)發(fā)項(xiàng)目了。這就違背了打包工具的初衷了。

2018年3月19日 16:09