页面加载进度条实现

实现页面顶部显示页面加载线性进度条的效果，可以使用 Vue 自带的 NProgress 库。具体实现方法如下：

1.安装 NProgress 库

在命令行中进入项目目录，执行以下命令安装 NProgress 库：

1
npm install --save nprogress

2.引入 NProgress 库

在 LoginView.vue 中引入 NProgress 库和样式文件：

1
2
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

3.在登录方法中使用 NProgress

在 login() 方法中使用 NProgress，在请求开始前调用 NProgress.start()，请求结束后调用 NProgress.done()，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
login() {
  this.$refs['loginRef'].validate((valid) => {
    if (valid) {
      // 开始请求时调用 NProgress.start()
      NProgress.start()

      request.post('/login', this.user).then(res => {
        if (res.code === '200') {
          this.$message.success("恭喜你，登录成功！即将跳转主页..")
          localStorage.setItem("yubo-user", JSON.stringify(res.data))  // 存储用户数据
          // 延迟一秒后跳转到主页
          setTimeout(() => {
            // 调用 NProgress.done() 结束进度条
            NProgress.done()
    
            // 跳转到首页
            this.$router.push('/');
          }, 1000);
        } else {
          this.$message.error(res.msg);
          // 调用 NProgress.done() 结束进度条
          NProgress.done()
        }
      })
    }

  })
}

4.如需修改进度条颜色，可前往 node_modules/nprogress/nprogress.css 进行修改

也可在App.vue 中设置
1
2
3
4
5
6
7
<style>
// 进度条颜色
#nprogress .bar {
  background-color: #e11740 !important;
}
</style>