一。背景
使用 vue-cli5 创建了vue工程,其中包含 router,全局引入了 Cenium 之后,发现在页面中使用时显示 this.Cenium是undefined。确定引入的Cenium没有问题,但是页面加载的时候,确实没有找到this.Cenium对象,Cenium全局变量是在main.js中定义的,说明,当前页面先于main.js加载了。经过多方面的排查,发现是 router 加载组件方式造成的。
router中直接加载组件,会造成无法读取全局变量的问题
二。router的两种组件加载方式
1. 直接加载
直接将组件内容加载过来,js 会在 main.js 之前执行,所以设置的全局变量无法加载。这种方式,只适合加载静态主页或者其他静态页面的时候使用。
结论:router中直接加载组件时,组件中的js逻辑会先于main.js执行,造成无法加载全局变量的问题。
2. 懒加载
组件不会立即渲染,而是在项目整体加载完成之后,访问时才会加载,也就是在 main.js 加载之后才会加载,所以可以正常使用 main.js 中定义的全局变量,适合普通页面。
结论:router中使用懒加载方式加载组件时,组件中的js逻辑会在main.js加载之后才执行,所以可以正常加载全局变量。
三。说明:
router中的直接加载方式:适合加载首页、说明页等js逻辑不复杂的页面。
router中的懒加载方式:适合加载js逻辑复杂的业务页面,如js中需要读取全局变量等操作。