如果用import引入的話,當項目打包時路由里的所有component都會打包在一個js中,造成進入首頁時,需要加載的內容過多,時間相對比較長。
當你用require這種方式引入的時候,會將你的component分別打包成不同的js,加載的時候也是按需加載,只用訪問這個路由網址時才會加載這個js。
你可以打包的時候看看目錄結構就明白了。
正文
我先用控制台創建了vue項目demo(如何創建可以參考我之前的寫的筆記 http://www.cnblogs.com/atjinna/p/6723293.html)。由於單頁面開發,會出現打包后的JavaScript包非常大,這會影響頁面加載速度,那我們可以考慮使用懶加載去優化這個問題,因此
resolve出現了。具體參考下面:
1、引入 vue-router(由於使用的是控制台創建的項目,並且使用了webpack這個模板,所以可以省略這一步)
2、定義 component 指定變量
1)、先看下目錄
2)、component 指定變量
3、path路徑注意點:
參數名、頁面路徑、以及懶加載
補充
我將整個router展示給大家看吧,這個其實是我上面提到的demo那個項目的代碼
還在研究中,所以寫得很青澀,也沒有解釋為何如此用,大家可以參考下文檔吧 https://router.vuejs.org/zh-cn/api/options.html#routes 以及另一份文檔 https://cn.vuejs.org/v2/guide/ 。哦,對了,我用的都是vue2,也建議大家使用vue2.