Vue中什么是路由懒加载?为什么要进行路由懒加载路由?下面本篇文章带大家了解一下vue中的路由懒加载,希望对大家有所帮助!路由懒加载懒加载本质是延迟加载或按需加载,即在需要的时候的时候进行加载。 首页不用设置懒加载,一个页面加载过后再次访问
Vue中什么是路由懒加载?为什么要进行路由懒加载路由?下面本篇文章带大家了解一下vue中的路由懒加载,希望对大家有所帮助!
懒加载本质是延迟加载或按需加载,即在需要的时候的时候进行加载。
首页不用设置懒加载,一个页面加载过后再次访问不会重复加载。
为什么要进行路由懒加载
当进行打包构建应用时,打包后的代码逻辑实现包可能会非常大。当用户要去使用的时候,那么就会把所有的资源都请求下来才可以。
当我们把不同的路由对应的组件分别打包,在路由被访问时再进行加载,就会更加高效。【相关推荐:vuejs视频教程、WEB前端开发】
路由懒加载所做的事情
将路由对应的组件加载成一个个对应的js包 。
在路由被访问时才将对应的组件加载。
vue异步组件
语法:component:resolve=>(require(['需要加载的路由的地址']),resolve)
// 官方文档:https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
const routes = [
{// 404路由
path: '/404',
name: '404',
component: resolve=>(require(["/@/views/404.vue"],resolve))
},
];
const router = createRouter({
history: createWebHistory("/"),
routes,
});
export default router;
ES import 常用
用户访问组件时,该箭头函数被执行
webpack:import动态导入语法能将该文件单独打包
语法:const xxx = ()=>import('需要加载的模块地址')
// 官方文档:Https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
const routes = [
{// 404路由
path: '/404',
name: '404',
component: ()=>import('/@/views/404.vue')
},
];
const router = createRouter({
history: createWebHistory("/"),
routes,
});
export default router;
以上就是vue中什么是路由懒加载?为什么要进行?的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: vue中什么是路由懒加载?为什么要进行?
本文链接: https://www.lsjlt.com/news/207087.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0