脚本宝典收集整理的这篇文章主要介绍了

实现vue-router 路由懒加载

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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

clipboard.png

clipboard.png

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'

这样就没问题了

总结

以上是脚本宝典为你收集整理的

实现vue-router 路由懒加载

全部内容,希望文章能够帮你解决

实现vue-router 路由懒加载

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过