vue使用nprogress加载路由进度条的方法
时间:2021-06-05 09:00:51|栏目:vue|点击: 次
1、效果图
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() })
总结
上一篇:分享一个精简的vue.js 图片lazyload插件实例
栏 目:vue
下一篇:详解vue使用vue-layer-mobile组件实现toast,loading效果
本文地址:http://www.codeinn.net/misctech/136006.html