美文网首页工作生活
vue中使用NProgress

vue中使用NProgress

作者: 薄荷加冰 | 来源:发表于2019-06-30 23:55 被阅读0次

vue中使用NProgress

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

1.安装

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

//用法

NProgress.start();NProgress.done();

2、使用

router.js

//导入

import NProgress from 'nprogress';

import 'nprogress/nprogress.css';

router.beforeEach((to, from, next) => {

NProgress.start();

next();

})

router.afterEach(() => {

NProgress.done();

})

3、Vue中使用NProgress 修改颜色

在App.vue的style中增加:

#nprogress .bar {

background: red !important; //自定义颜色

}

相关文章

网友评论

    本文标题:vue中使用NProgress

    本文链接:https://www.haomeiwen.com/subject/spwicctx.html