欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue使用nprogress加载路由进度条的方法

程序员文章站 2022-04-09 16:16:09
1、效果图2、安装npm install --save nprogress基本用法nprogress.start();nprogress.done();3、在路由中使用import nprogress...

1、效果图

vue使用nprogress加载路由进度条的方法

2、安装

npm install --save nprogress

基本用法

nprogress.start();
nprogress.done();

3、在路由中使用

import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeeach((to, from, next) => {
 nprogress.start();
 next();
});

router.aftereach(() => {
 nprogress.done();
});

ps:下面看下vue使用nprogress的方法

nprogress是页面跳转是出现在浏览器顶部的进度条

官网:

github:

如下图所示,绿色的进度条就是nprogress实现的效果

vue使用nprogress加载路由进度条的方法

1、安装

$ npm install --save nprogress 或者
$ yarn add nprogress

//用法
nprogress.start();
nprogress.done();

2、使用

//导入
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeeach((to, from, next) => {
 nprogress.start()
 next()
})

router.aftereach(() => {
 nprogress.done()
})

总结

到此这篇关于vue使用nprogress加载路由进度条的文章就介绍到这了,更多相关vue nprogress路由进度条内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!