vue-element-admin入门①

事先声明本人是后端程序开发员，前端讲解上面可能存在缪误之处，请大家合理借鉴。

一 项目地址

https://element.eleme.cn/#/zh-CN/component/installation
1

二 项目访问所运行的流程

当我们下载完成项目并启动后，访问 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就放行了。

放行之后，会进入路由器配置文件中，如下图所示：

进入到这里根据根据路径就找到了登录组件，转到对应的登录页面，就可以看到 登录页面了。