本文介绍了vue的路由懒加载,分享给大家,具体如下:
我们可以把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件。
- component可以是一个箭头函数,我们可以使用动态 import语法来定义代码分块点;
- 如果想在network里面看到动态加载的组件名字,可以加webpackChunkName;
- 同时要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName
},{
path: '/todos',name: 'Todos',component: () => import(/ webpackChunkName: 'todo' /'@/pages/Todos')
}
]
})
注意 上面的@代表当前src目录,具体可以去参考webpack的配置
output: {
path: config.build.assetsRoot,filename: '[name].js',// 需要配置的地方
chunkFilename: '[name].js',publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
}
分析
创建了home和todos两个组件使用了路由懒加载,配置好之后我们执行npm run dev来运行项目,打开network之后刷新一下,我们会发现加载了home.js,我们会发现和上面定义的webpackChunkName名字一样,同时点todos会加载todo.js。这就是路由懒加载的简单使用。
其他
在main.js里面项目的入口我们可以使用template的语法,也可以使用render函数
return (
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。