实现vue-router 路由懒加载

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

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'

这样就没问题了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值