页面载入进度条 nprogress的使用

最新推荐文章于 2024-07-19 15:32:49 发布

NolanKy

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量711

点赞数

分类专栏：前端 vue 文章标签： npm vue.js 前端

本文链接：https://blog.csdn.net/weixin_45644335/article/details/122239967

版权

前端同时被 2 个专栏收录

61 篇文章 3 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

介绍

页面路由切换时，附带一个加载进度条会显得非常友好，不至于白屏时间过长，让用户以为页面假死。

这时候我们可以用到 nprogress[108]，在路由切换时开启和关闭：

安装

npm

npm install --save nprogres

yarn

yarn add nprogress

使用

直接调用 start()或者done()来控制进度条。

可以使用inc()随机增长进度条，注意，这个方法永远不会让进度条达到100%。

NProgress.inc()

通过使用done()让进度条关闭。

NProgress.done(true)

import NProgress from 'nprogress';

router.beforeEach(async (to, from, next) => {
  NProgress.start();
});

router.afterEach((to) => {
  NProgress.done();
});

ES6用法（高级用法）

import { start, done, inc, configure } from 'nprogress'

configure({ easing: 'ease', speed: 300 })


router.beforeEach((to, from, next) => {
  start()
  inc()
  return next()
})

router.afterEach(route => {
  setTimeout(() => {
    done() // 进度条加载完成
  }, 300)
})