事先声明本人是后端程序开发员,前端讲解上面可能存在缪误之处,请大家合理借鉴。
一 项目地址
https://element.eleme.cn/#/zh-CN/component/installation
二 项目访问所运行的流程
当我们下载完成项目并启动后,访问 http://localhost:9527/
地址时,也即启动栏地址,如下图所示:
流程会先到main.js中(这个是项目下载后就配置好的,也就是进入到主函数main.js)的new Vue中,如下图所示,一步步走到红框位置,指向了App这个组件,也就是红框中的app。
点击一下这个红色的App即可以到达App组件,到达这个组件后,如下图所示红框中位置是路由的一个显示框,通过这个框,它会触发路由器。
当触发路由器时,会先触发路由器的一个钩子函数,如下图所示,
因为访问路径是/
,跟着该函数往下走,因为刚登录,没有设置token,会经过判断进入到下图所示的判断语句中
会进入到else里边,whiteList就是一个数组,这个到代码里自己一看就知道了,进入之后会经过 next(
/login?redirect=${to.path})
,这是钩子函数的参数,进入它就会在此进行路由,路由的访问路径就是 /login?redirect={to.path}
然后在进行一遍钩子函数,最后进入到上图的if语句中,直接next就放行了。
放行之后,会进入路由器配置文件中,如下图所示:
进入到这里根据根据路径就找到了登录组件,转到对应的登录页面,就可以看到 登录页面了。