vue 實現頁面 懶載入
阿新 • • 發佈:2022-03-05
常規配置路由(非懶載入):
1.匯入對應頁面檔案
2.填寫路由配置
實現懶載入方式:
1.不需要匯入對應頁面檔案,如果需要懶載入,就不能匯入,否則懶載入會無效,會變成常規載入方式。
2.直接填寫路由配置即可!
瀏覽器檢視效果:
這裡的Test.js 名字 是剛剛在上面綠色註解裡面填的內容 ,自己隨意取名即可。
當點選該頁面後才會進行載入,而不會在第一次進入網站時就一次性全部載入完成,如果是一次性全部載入完成,首次進入網頁需要等待時間較長,影響使用者體驗。
提示:當設定完懶載入後,首頁進入還是把全部js都載入了,這些檔案屬於prefetch,也就是預讀取,他的載入基本不會影響到當前頁面的開啟,而且在讀取完成後,可以降低頁面跳轉的等待時間,是一個非常好的功能。
程式碼如下:
{
path: '/test',
name: 'Test',
meta:{
title:'測試'
},
component: () => import(/* webpackChunkName: "Test" */ '../views/Test.vue'),
}