• 周日. 11月 27th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

Vue项目中给路由跳转加上进度条nprogress

admin

11月 28, 2021

1,安装
  

npm install --save nprogress

2、在main.js文件中引入

  

import NProgress from ‘nprogress’;
  import ‘nprogress/nprogress.css’;

  //在页面跳转使用
  router.beforeEach((to,from,next) => {
    //开始进度条
    NProgress.start();
    // 继续路由
    next();
  });
  router.afterEach(transition => {
    //结束进度条
    NProgress.done();
  });

3、个性化配置

 

 NProgress.configure({

    easing: 'ease', // 动画方式

    speed: 500, // 递增进度条的速度

    showSpinner: false, // 是否显示加载

     trickleSpeed: 200, // 自动递增间隔

    minimum: 0.3 // 初始化时的最小百分比

  })

4.样式在app.vue中全局样式

<style>

  #nprogress .bar { background: red !important; }

</style>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注