Vue按需加載須要的路由(路由懶加載和修改chunk.js文件名)

1、第一種寫法：

1.在src/下新建router.config.js：

 1 export default[  2  {  3     path: '/home',  4     component: (resolve) => require(['./components/home/Home.vue'], resolve),  5  children: [  6  {  7         path: 'revisepassword/:username',  8         component: (resolve) => require(['./components/revisepassword/Revisepassword.vue'], resolve)  9  }, 10  { 11         path: 'userfeedback/:username', 12         component: (resolve) => require(['./components/userfeedback/Userfeedback.vue'], resolve) 13  }, 14  { 15         path: 'aboutus', 16         component: (resolve) => require(['./components/aboutus/Aboutus.vue'], resolve) 17  } 18  ] 19  }, 20  { 21     path: '/rainie', 22     component: (resolve) => require(['./components/rainie/Rainie.vue'], resolve) 23  }, 24  { 25       path: '/radar', 26       component: (resolve) => require(['./components/radar/Radar.vue'], resolve) 27  }, 28  { 29     path: '/weatherforecast', 30     component: (resolve) => require(['./components/weatherforecast/Weatherforecast.vue'], resolve) 31  }, 32  { 33     path: '/login', 34     component: (resolve) => require(['./components/login/Login.vue'], resolve) 35  }, 36  { 37     path: '/register', 38     component: (resolve) => require(['./components/register/Register.vue'], resolve) 39  }, 40  { 41     path: '/', 42     redirect: '/login'
43  }, 44  { 45     path: '*', 46     redirect: '/login'
47  } 48 ]

2.在main.js中：

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 import VueRouter from 'vue-router'
 4 import routerConfig from './router.config.js'
 5 
 6 const router = new VueRouter({  7   // 讓滾動條滾回原來的位置
 8   scrollBehavior: () => ({ y: 0 }),  9   // 去除vue路由分隔的#號
10   // mode: 'history',
11  routes: routerConfig 12 }) 13 
14 new Vue({ 15   el: '#app', 16  router, 17   render: h => h(App) 18 })

2、第二種寫法更改高級一些（推薦）

1.在src/下新建router文件夾，在router文件夾下新建index.js,在index.js中：

 

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 
 4 Vue.use(Router)  5 
 6 const Home = (resolve) => {  7     import('../components/home/Home').then((module) => {  8  resolve(module)  9  })  10 }  11 
 12 const Revisepassword = (resolve) => {  13     import('../components/revisepassword/Revisepassword').then((module) => {  14  resolve(module)  15  })  16 }  17 
 18 const Userfeedback = (resolve) => {  19     import('../components/userfeedback/Userfeedback').then((module) => {  20  resolve(module)  21  })  22 }  23 
 24 const Aboutus = (resolve) => {  25     import('../components/aboutus/Aboutus').then((module) => {  26  resolve(module)  27  })  28 }  29 
 30 const Rainie = (resolve) => {  31     import('../components/rainie/Rainie').then((module) => {  32  resolve(module)  33  })  34 }  35 
 36 const Radar = (resolve) => {  37     import('../components/radar/Radar').then((module) => {  38  resolve(module)  39  })  40 }  41 
 42 const Weatherforecast = (resolve) => {  43     import('../components/weatherforecast/Weatherforecast').then((module) => {  44  resolve(module)  45  })  46 }  47 
 48 const Login = (resolve) => {  49     import('../components/login/Login').then((module) => {  50  resolve(module)  51  })  52 }  53 
 54 const Register = (resolve) => {  55     import('../components/register/Register').then((module) => {  56  resolve(module)  57  })  58 }  59 
 60 // 配置路由
 61 export default new Router({  62  routes: [  63  {  64             // 配置默認的路由(根路由)
 65             path: '/',  66             redirect: '/login'
 67  },  68  {  69             path: '/home',  70  component: Home,  71  children: [  72  {  73                     path: 'revisepassword/:username',  74  component: Revisepassword  75  },  76  {  77                     path: 'userfeedback/:username',  78  component: Userfeedback  79  },  80  {  81                     path: 'aboutus',  82  component: Aboutus  83  }  84  ]  85  },  86  {  87             path: '/rainie',  88  component: Rainie  89  },  90  {  91             path: '/radar',  92  component: Radar  93  },  94  {  95             path: '/weatherforecast',  96  component: Weatherforecast  97  },  98  {  99             path: '/login', 100  component: Login 101  }, 102  { 103             path: '/register', 104  component: Register 105  } 106  ] 107 })

 

2.在main.js中：

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 
 4 import router from './router'
 5 
 6 new Vue({  7   el: '#app',  8  router,  9   render: h => h(App) 10 })

3.注意別忘了安裝插件

第二種：使用webpck的import()來作代碼分割——import('./nice-scroll').then(init => init(dom))

webpack dynamic import出錯: SyntaxError: ‘import’ and ‘export’ may only appear at the top level

解決辦法： cnpm install --save-dev babel-plugin-syntax-dynamic-import

而後調整babel-loader配置以下：

1 use: { 2     loader: 'babel-loader', 3  options: { 4 
5         "plugins": [ 6             "syntax-dynamic-import"
7  ] 8  } 9 }

 3、默認狀況下，加載的路由js是按照0.js  1.js  2.js....命名的，想要修改js的名字

在webpack.config.js中的output:{}中添加

chunkFilename: '[chunkhash].chunk.js'