JS動態引入模組

這是靜態引入，import xx from ‘xxx’；

這是動態引入，import('xxx')

動態引入是一個非同步操作，即它會返回一個Promise物件，因此我們可以捕獲引入失敗的異常。

具體運用場景：

路由由後端動態生成，前端根據獲取到的路由動態生成選單，並根據對應路由去找到對應的元件進行跳轉。

譬如路由為/home，那麼對應檔案/views/home/index.vue必須存在，才能正確進行跳轉。

若後端新增了新的路由（無論是直接運算元據庫，或者前端透過配置頁面去調介面新增），那麼此時打包的專案內是不存在新增路由的頁面檔案，因此需要用到動態路由。

const router = {
                    path: item.path,
                    name: item.path || '',
                    component: () => import(`@/views/${item.path}/index.vue`).catch(() => {
                            return import('@/components/Transitionpage/index.vue') //未找到上面引入的模組時，引入該過渡頁面
                        }),
                })
}

注意，返回的是一個promise物件，因此無論是正常捕獲then還是異常捕獲catch，都要重新返回一個檔案引用，否則會卡住。