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

一、第一种写法：

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

export default[
  {
    path: '/home',
    component: (resolve) => require(['./components/home/Home.vue'], resolve),
    children: [
      {
        path: 'revisepassword/:username',
        component: (resolve) => require(['./components/revisepassword/Revisepassword.vue'], resolve)
      },
      {
        path: 'userfeedback/:username',
        component: (resolve) => require(['./components/userfeedback/Userfeedback.vue'], resolve)
      },
      {
        path: 'aboutus',
        component: (resolve) => require(['./components/aboutus/Aboutus.vue'], resolve)
      }
    ]
  },
  {
    path: '/rainie',
    component: (resolve) => require(['./components/rainie/Rainie.vue'], resolve)
  },
  {
      path: '/radar',
      component: (resolve) => require(['./components/radar/Radar.vue'], resolve)
  },
  {
    path: '/weatherforecast',
    component: (resolve) => require(['./components/weatherforecast/Weatherforecast.vue'], resolve)
  },
  {
    path: '/login',
    component: (resolve) => require(['./components/login/Login.vue'], resolve)
  },
  {
    path: '/register',
    component: (resolve) => require(['./components/register/Register.vue'], resolve)
  },
   {
    path: '/',
    redirect: '/login'
  },  
  {
    path: '*',
    redirect: '/login'
  }
]

2.在main.js中：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routerConfig from './router.config.js'

const router = new VueRouter({
  // 让滚动条滚回原来的位置
  scrollBehavior: () => ({ y: 0 }),
  // 去除vue路由分隔的#号
  // mode: 'history',
    routes: routerConfig
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

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

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

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const Home = (resolve) => {
    import('../components/home/Home').then((module) => {
        resolve(module)
    })
}

const Revisepassword = (resolve) => {
    import('../components/revisepassword/Revisepassword').then((module) => {
        resolve(module)
    })
}

const Userfeedback = (resolve) => {
    import('../components/userfeedback/Userfeedback').then((module) => {
        resolve(module)
    })
}

const Aboutus = (resolve) => {
    import('../components/aboutus/Aboutus').then((module) => {
        resolve(module)
    })
}

const Rainie = (resolve) => {
    import('../components/rainie/Rainie').then((module) => {
        resolve(module)
    })
}

const Radar = (resolve) => {
    import('../components/radar/Radar').then((module) => {
        resolve(module)
    })
}

const Weatherforecast = (resolve) => {
    import('../components/weatherforecast/Weatherforecast').then((module) => {
        resolve(module)
    })
}

const Login = (resolve) => {
    import('../components/login/Login').then((module) => {
        resolve(module)
    })
}

const Register = (resolve) => {
    import('../components/register/Register').then((module) => {
        resolve(module)
    })
}

// 配置路由
export default new Router({
    routes: [
        {
            // 配置默认的路由(根路由)
            path: '/',
            redirect: '/login'
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'revisepassword/:username',
                    component: Revisepassword
                },
                {
                    path: 'userfeedback/:username',
                    component: Userfeedback
                },
                {
                    path: 'aboutus',
                    component: Aboutus
                }
            ]
        },
        {
            path: '/rainie',
            component: Rainie
        },
        {
            path: '/radar',
            component: Radar
        },
        {
            path: '/weatherforecast',
            component: Weatherforecast
        },
        {
            path: '/login',
            component: Login
        },
        {
            path: '/register',
            component: Register
        }
    ]
})

2.在main.js中：

import Vue from 'vue'
import App from './App.vue'

import router from './router'

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

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配置如下：

use: {
    loader: 'babel-loader',
    options: {

        "plugins": [
            "syntax-dynamic-import"
        ]
    }
}

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

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

chunkFilename: '[chunkhash].chunk.js'