Vue按需加载需要的路由(路由懒加载和修改chunk.js文件名)

一、第一种写法：

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 })

二、第二种写法更改高级一些（推荐）

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 }

三、默认情况下，加载的路由js是按照0.js 1.js 2.js....命名的，想要修改js的名字

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

chunkFilename: '[chunkhash].chunk.js'