几种路由懒加载 实现方式
两种方式: 1..Vue异步加载技术
1:vue-router配置路由,使用vue的异步组件技术,可以实现懒加载,此时一个组件会生成一个js文件。
2:component: resolve => require(['放入需要加载的路由地址'], resolve)
{
path: '/problem',
name: 'problem',
component: resolve => require(['../pages/home/problemList'], resolve)
}
2.ES6推荐方式imprort ()
1:直接将组件引入的方式,import是ES6的一个语法标准,如果需要浏览器兼容,需要转化成es5的语法。
2:推荐使用这种方式,但是注意wepack的版本>2.4
3:vue官方文档中使用的也是import实现路由懒加载
4:上面声明导入,下面直接使用
import Vue from 'vue'; import Router from 'vue-router'; // 官网可知:下面没有指定webpackChunkName,每个组件打包成一个js文件。 const Foo = () => import('../components/Foo') const Aoo = () => import('../components/Aoo') // 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。 // const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo') // const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo') export default new Router({ routes: [ { path: '/Foo', name: 'Foo', component: Foo }, { path: '/Aoo', name: 'Aoo', component: Aoo } ] })
本文来自博客园,作者:Kira的学习笔记,转载请注明原文链接:https://www.cnblogs.com/kira2022/p/16083520.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本