nprogress 进度条插件

最新推荐文章于 2024-10-11 10:27:21 发布

金憨憨_

最新推荐文章于 2024-10-11 10:27:21 发布

阅读量289

点赞数

分类专栏： vscode 文章标签： vue plugin

本文链接：https://blog.youkuaiyun.com/qq_40573810/article/details/119204320

版权

vscode 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了nprogress.js，一款适用于Vue的进度条插件，常用于router.beforeEach()。讲解了通过npm安装和CDN引入两种方式，并简述了其API和实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nprogress官网

nprogress.js是一款进度条插件，个人用于vue的router.beforeEach()中。

安装方法

1、npm 安装

npm install --save nprogress   (--save:开发也需要用到的依赖)

2、CDN引入

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

api

NProgress.start();
NProgress.done();
NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()
NProgress.inc(); 		// 随机增长，永远不会到1

实际使用

//permission.js

import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style

NProgress.configure({showSpinner: false}); 	// 进度环隐藏

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

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