1. 安装:
cnpm install --save nprogress
2. 在 main.JS 中引入:
- import NProgress from 'nprogress'
- import 'nprogress/nprogress.CSS'
3. 在 main.JS 中进行配置:
- NProgress.configure({
- easing: 'ease', // 动画方式
- speed: 500, // 递增进度条的速度
- showSpinner: false, // 是否显示加载 ico
- trickleSpeed: 200, // 自动递增间隔
- minimum: 0.3 // 初始化时的最小百分比
- })
4. 在 main.JS 中对路由钩子进行设置:
- // 当路由进入前
- router.beforeEach((to, from , next) => {
- // 每次切换页面时, 调用进度条
- NProgress.start();
- // 这个一定要加, 没有 next() 页面不会跳转的. 这部分还不清楚的去翻一下官网就明白了
- next();
- });
- // 当路由进入后: 关闭进度条
- router.afterEach(() => {
- // 在即将进入新的页面组件前, 关闭掉进度条
- NProgress.done()
- })
修改颜色:
在 App.vue 中的 style 中增加:
- #nprogress .bar {
- background: red !important; // 自定义颜色
- }
来源: http://www.bubuko.com/infodetail-3265676.html