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(); 123456

2、使用

router.js

//导入 import NProgress from 'nprogress' import 'nprogress/nprogress.css' router.beforeEach((to, from, next) => { NProgress.start() next() }) router.afterEach(() => { NProgress.done() }) 123456789101112

颜色修改：https://blog.csdn.net/wn1245343496/article/details/82082152