javascript 文件结构发生变化，需要适应新的文件结构，如何动态加载路由配置文件

艾小牛 2018-04-17 11:52:52

正常情况下，js文件结构下有一个目录，是个空目录。
有些操作，会在这个空目录下产生独立的业务目录；
再次打开网页时，需要把这个新生成的业务目录中的路由配置文件加载到框架中去，该怎么加载？
目前使用的有技术js+jquery+AngularJS+requireJS。

迫切希望得到大神的指点！

...全文

589 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

前言：在vue项目中都需要配置router，而在一个项目中需要配置的静态路由非常多，一个router.js文件下写几百行代码，这也太xxxx了解决的话一个是后端提供路由进行路由动态加载渲染，另一种就是对路由文件的动态加载接下来我们来实现下路由文件的动态加载第一步，在创建vue文件时，可以在同级文件夹下在创建一个router.js，在这里面配置本路由及其子路由 //路由懒加载 const Login = () => import(/* webpackChunkName: "log..

在Vue.js中，可以使用vue-router来实现路由懒加载，也称为动态加载路由。路由懒加载的目的是在用户访问某个路由时再加载对应的组件，而不是在应用初始化时一次性加载所有组件。这样可以提高应用的初始加载速度，只在需要时才加载对应的组件。要实现路由懒加载，可以使用Vue提供的异步组件加载功能，结合import()函数或webpack的动态import()语法。

通过本篇技术博文的学习，我们深入了解了 Vue 路由懒加载的原理和应用。路由懒加载是提升 Web 应用性能的关键技术之一，它能帮助我们在应用中实现按需加载，提高加载速度，优化用户体验。在使用路由懒加载时，我们学会了安装和配置依赖，将路由配置为懒加载，并使用动态导入组件的方式来延迟加载页面。我们还探讨了预加载、组件懒加载、代码拆分和打包策略等进阶技巧，帮助开发人员进一步提升应用性能。当然，除了路由懒加载，我们还可以与其他优化策略相结合，如代码分割等，实现更完善的性能优化。

1、vue异步组件实现路由懒加载component：resolve =>([ '需要加载的路由的地址' ，resolve ])2、es提出的import(推荐使用这种方式)const HelloWorld = （） => import('需要加载的模块地址')一、为什么要使用路由懒加载为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。二、定义懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。三、使用。

官方解释 1、当打包构建应用时，Javascript包会变得非常大，影响页面加载 2、如果我们能把不用路由对应的组件分割成不用的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了解读官方路由中通常会定义很多不同的页面，一般放在js文件。但是页面这么多放在一个js文件中，必然会造成这个页面非常大，如果一次性从服务器请求下来这个页面，可能需要花费一定时间，甚至用户电脑上出现短暂空白情况，为避免这种情况，使用路由懒加载路由懒加载具体做什么 1、路由懒加载的主要作用是将对应的组件打包成一个个的js

87,909

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章