1. 程式人生 > 其它 >vue 實現頁面 懶載入

vue 實現頁面 懶載入

常規配置路由(非懶載入):

1.匯入對應頁面檔案

2.填寫路由配置

實現懶載入方式:

1.不需要匯入對應頁面檔案,如果需要懶載入,就不能匯入,否則懶載入會無效,會變成常規載入方式。

2.直接填寫路由配置即可!

瀏覽器檢視效果:

   這裡的Test.js 名字 是剛剛在上面綠色註解裡面填的內容 ,自己隨意取名即可。

當點選該頁面後才會進行載入,而不會在第一次進入網站時就一次性全部載入完成,如果是一次性全部載入完成,首次進入網頁需要等待時間較長,影響使用者體驗。

提示:當設定完懶載入後,首頁進入還是把全部js都載入了,這些檔案屬於prefetch,也就是預讀取,他的載入基本不會影響到當前頁面的開啟,而且在讀取完成後,可以降低頁面跳轉的等待時間,是一個非常好的功能。

程式碼如下:

{
    path: '/test',
    name: 'Test',
    meta:{
      title:'測試'
    },
    component: () => import(/* webpackChunkName: "Test" */ '../views/Test.vue'),
  }