vue nprogress进度条 vue使用nprogress加载路由进度条的方法
向日葵_简默 人气:01、效果图
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是页面跳转是出现在浏览器顶部的进度条
官网:http://ricostacruz.com/nprogress/
github:https://github.com/rstacruz/nprogress
如下图所示,绿色的进度条就是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() })
总结
加载全部内容