vue散记：router的两种加载方式(无法读取全局变量的问题)

一。背景

使用 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中需要读取全局变量等操作。