閒嘮嗑幾句

今天公司有新的專案要開展，需要重新部署新的專案，所以說以前好多忘記的東西，又得重新撿起來一遍，配置路由的時候發現還是使用的普通的使用require懶載入路由，所以在檢視文件和資料後又重新總結了一遍，以加深記憶和方便下次查閱。

一、使用import非同步引入元件

{
   path: '/hyh',
   component: ()=>{ import('@/components/ShowTest') },
   name: 'ShowTest'
}

{
  path: '/show',
  meta:{ requireAuth: true },
  name: 'showTest',
  component: resolve => { import('@/components/ShowTest').then(module=>resolve(module)) }
}
 

註解：有時候我們想把某個路由下的所有元件都打包在同個非同步塊 (chunk) 中。只需要使用 命名 chunk，一個特殊的註釋語法來提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
 

二、使用require非同步引入元件

{
   path: '/index',
   component: (resolve) => {  require(['../components/index/index'], resolve) }
}

三、使用require.ensure 非同步引入元件

const Province = r => require.ensure([], () => r(require('@/components/Province.vue')), 'chunkname1')
const Segment = r => require.ensure([], () => r(require('@/components/Segment.vue')), 'chunkname2')
const Loading = r => require.ensure([], () => r(require('@/components/Loading.vue')), 'chunkname3')
const User = r => require.ensure([], () => r(require('@/components/User.vue')), 'chunkname3')

{
   path: '/show',
   name: 'showTest',
   component: r => require.ensure([], () => r(require('../components/ShowTest')), 'showtest')
}
 

* 註解：

require.ensure()

語法：

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

簡介：

  webpack 在編譯時，會靜態地解析程式碼中的 require.ensure()，同時將模組新增到一個分開的 chunk 當中。這個新的 chunk 會被 webpack 通過 jsonp 來按需載入。

1. 引數詳解：

• 依賴 dependencies

  這是一個字串陣列，通過這個引數，在所有的回撥函式的程式碼被執行前，我們可以將所有需要用到的模組進行宣告。

• 回撥 callback

  當所有的依賴都載入完成後，webpack會執行這個回撥函式。require 物件的一個實現會作為一個引數傳遞給這個回撥函式。因此，我們可以進一步 require() 依賴和其它模組提供下一步的執行。

• chunk名稱 chunkName

  chunkName 是提供給這個特定的 require.ensure() 的 chunk 的名稱。通過提供 require.ensure() 不同執行點相同的名稱，我們可以保證所有的依賴都會一起放進相同的 檔案束(bundle)。

2. 詳細文件解釋：

https://blog.csdn.net/qq_27626333/article/details/76228578

3. 路由登入許可權：

https://www.cnblogs.com/learnoffs/p/8026768.html