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

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

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

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

...全文

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

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

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

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

在构建大型VUE项目时，比如好几百个路由，将路由页面打包到一起，JavaScript包会变得非常大，影响首页的加载性能，而这些路由页面中的绝大多数并非首页加载所必须的，这时我们需要使用路由懒加载的功能，把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。结合 Vue 的异步组件和 Webpack 的代码分割功能，可以轻松实现路由组件的懒加载。

其实可以很明显的发现，出错之后的打包，大小远远小于正常清空下的，这是因为动态加载文件的时候，没有成功加载动态路由的文件，大小直接比之前小了一大半，而动态加载需要用到babel插件来进行转译，所以babel出问题就会导致打包时，动态路由的文件无法正常加载。首先这个方法十分的粗暴，就是将懒加载改为了非懒加载，我在修改之后，虽然动态路由的页面能够正常显示了，但是会出现样式文件失效的问题，从性能上来说没达到要求，从效果上来说也不对，因此这种方案。，解决了这个大坑，这说明已经正常加载了动态路由文件！

Vue Router 懒加载技巧，聚焦于结合动态路由与按需加载组件，以深度优化项目初始加载速度

87,991

社区成员

224,688

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章