[聚合文章] 实现vue-router 路由懒加载

相比React，Vue实现组件的懒加载还是比较简单的，以下是官方文档的说明

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'Navigator',
            component: () => import(/* webpackChunkName: "navigator" */ './../components/Navigator')
        },
        {
            path: '/tucao',
            name: 'Tucao',
            component: () => import(/* webpackChunkName: "tucao" */ './../components/Tucao')
        }
    ]
})

以上是按照官方文档写的懒加载代码，但是发现chunk命名并没生效
，再去仔细看看官方文档说明

“结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载”

其实还差一个webpack配置，就是webpack output需要加个chunkFilename

chunkFilename: '[name].js'

这样就没问题了

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。