Vue使用NProgress
NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https://github.com/rstacruz/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、颜色值更改
在App.vue
中的style
中增加:
#nprogress .bar { background: red !important; //自定义颜色 }