大数据毕业设计之前端07：进度条和Loading页面的实现，路由导航守卫告诉你答案...

前言

在后台管理系统或者前端页面的切换过程中，总会遇到网络波动、数据加载慢导致的页面访问慢的问题。我们在访问一些网站，遇到页面加载不出来的时候，通常显示一个进度条，或者一个loading页面的动画页面。

那么，进度条和loading页面是如何实现的呢？

NProgress：进度条

在切换路由页面时，会在上方显示一个进度条，在Vue中，借助NProgress可以轻松实现。

1. 安装

使用npm安装nprogress。

npm i nprogress
# typecript报错的话就要执行
npm i --save-dev @types/nprogress

代码实现

需要借助 路由导航守卫 来实现进度条的起点和终点。路由导航守卫的目的说白了就是监控路由的行为。

在点下路由的一瞬间，还未跳转到目标路由时，会执行beforeEach导航守卫，这时候就让进度条开始，即调用NProgress.start() 。在跳转到新路由之后，会执行afterEach