鍍金池/ 問答/HTML/ Vue-router 路由組件懶加載問題

Vue-router 路由組件懶加載問題

關于vue-router 的路由組件懶加載問題

import Vue from 'vue'
import Router from 'vue-router'
const page404 = () => import('@/views/404')
// const view = name => import(`@/views/${name}`)
Vue.use(Router)
const constantRoutes = [
  {
    path: '/',
    name: '首頁',
    component: () => import('@/views/Home'), // working
    // component: view('Home'), do not working
    icon: 'iconfont icon-home1'
  },
  {
    path: '*',
    name: '404',
    component: page404
  }
]
export default new Router({
  mode: 'history',
  linkActiveClass: 'active',
  routes: constantRoutes
})
  1. 我使用
const page404 = () => import('@/views/404')

{
    path: '*',
    name: '404',
    component: page404
  }

這樣的方式懶加載是沒有問題的

但這樣組件一多加載起來就比較不科學了，因為會寫很多相同的代碼

然后我想著寫一個方法來懶加載需要的組件

const view = name => import(`@/views/${name}`)
{
    path: '/',
    name: '首頁',
    component: view('Home'),
  }

我本來想著這樣就可以通過調(diào)用view('component name')方法來加載組件了，但發(fā)現(xiàn)這樣就報錯了

clipboard.png

為了檢查這兩種加載方式不同的地方，我講整個路由打印出來，發(fā)現(xiàn)的確是不一樣的！

clipboard.png

可以看出使用component: view('Home')加載返回的是一個Promise
而使用component: () => import('@/views/Button')加載返回的才是一個組件

clipboard.png

仔細觀察其實我需要的組件在這個promise對象的_ctor[0].component,但事實上我并不知道如何才能取到這個組件？

試過 component: view('Home').then(res => res.data),

結(jié)果還是一樣的報錯，目前無頭緒，請求指教！

回答
編輯回答
晚風眠

const view = name => import('@/views/${name}\') 改為 const view = name => () => import('@/views/${name}')

2018年5月22日 05:57
編輯回答
夏夕

import或者require里的路徑必須是個靜態(tài)的字符串，不然webpack識別不到，因為webpack打包的時候是靜態(tài)分析，不是動態(tài)執(zhí)行的，獲取不到變量的值

2017年10月31日 20:31
編輯回答
乞許

webpack的話可以采用require.context方法來自動進行路由懶加載.

 const routes = [
    { path: '*', redirect: '/index' }
  ];
 importPages(require.context('./views', true, /\.vue$/,'lazy'))
 function importPages (r) {
    r.keys().forEach(key => {
      routes.push({ path: (key.split('.'))[1], component: ()=>r(key)})
    });
  }
2018年3月6日 04:16
編輯回答
胭脂淚

你要是在node環(huán)境也許可以這么寫，但你現(xiàn)在需要用webpack打包，webpack必須要一個靜態(tài)的字符串，才能知道打包哪些文件
https://webpack.js.org/api/mo...
webpack文檔中的ES6 import部分有些有寫

The keyword here is statically. Normal import statement cannot be used dynamically within other logic or contain variables. 
這里的關鍵字是靜態(tài)的。普通import語句不能在其他邏輯中動態(tài)使用或包含變量。

require同理

圖片描述

官方給的動態(tài)加載實例寫了后綴名，你試試加上后綴名，而且似乎只能用import()這種異步寫法加載

2017年9月28日 20:39
編輯回答
不舍棄

我遇到的問題是用component: () => import('@/views/Home'), 這種方式也報錯。查了好多資料，都沒看見別人遇到過這種問題。唉，抓狂

2018年6月2日 20:52
編輯回答
陪妳哭
'zh-CN': (lang, path) => {
    return r => require.ensure([], () =>r(require(`../views${lang}/${path}.vue`)),'zh-CN');
  }

require(../views${lang}/${path}.vue)

2018年4月29日 13:23