路由懒加载模式「建议收藏」
2023-06-13 09:13:27 时间
大家好,又见面了,我是你们的朋友全栈君。
路由懒加载
没用懒加载现状:
VueRouter
是在路由规则中,当路由规则模块被执行时,所有的页面组件会被一次性加载进来
编辑项目中的路由模块,将首页直接加载即可,其他所有页面使用懒加载方式引入使用:
原先引入页面方式:
import Login from '../pages/Login'
import Main from '../pages/Main'
//创建映射
const routes=[
{
name:'login',
path:'/login',
alias:'/',
component:Login
},{
name:'main',
path:'/main',
component:Main
]
上述的加载方式,如果一个项目中包含的页面组件过多,就会让项目启动后的第一个页面加载缓慢;针对这样的问题路由模块提供了一种加载方式:按需加载,当用户的请求匹配到某个路由路径时再加载对应的路由组件,这样的加载方式可以有效的避免首页加载缓慢问题,称为路由懒加载技术
固定语法,通过内建语法懒加载引入页面组件
编辑项目中的路由模块,将首页直接加载即可,其他所有页面使用懒加载方式引入使用:
使用懒加载方式:
const routes=[
{
name:'login',
path:'/login',
alias:'/',
component:Login
},{
name:'main',
path:'/main',
component:()=>import ('../pages/Main')]
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/188650.html原文链接:https://javaforall.cn
相关文章
- laravel 使用资源路由创建控制器关联模型获取不到实例??(坑)
- 中国电信修改光猫路由模式为桥接模式怎么改_打10000改电信光猫桥接模式
- vue路由传参的两种方式的区别_vue路由跳转获取参数
- 【Laravel系列3.4】中间件在路由与控制器中的应用
- APP动态路由的设计与实践
- 极路由4增强版B70(HC5962)刷机
- VUE路由设置history模式刷新404处理
- (五)动态路由匹配和获取参数
- (十三)在嵌套路由中使用命名视图
- uniapp 路由模式 history 和 hash 区别(解决tp5和uniapp h5路由冲突的问题)
- python-flask之路由及请求参数
- Linux构建超强的软路由(linux做软路由)
- Linux下深入理解路由查看(路由查看linux)
- 在Linux 中设置静态路由表(linux静态路由添加)
- Linux路由:实现网络连接的关键技术(linux的route)
- 器搭建路由器:Linux系统实现最佳体验(linux系统路由)
- Linux路由分析:通往架构优化之路.(linux 路由分析)
- 转发Linux下如何利用IP转发实现网络路由(linux如何编写ip)