• vue使用nprogress页面加载进度条


    vue使用nprogress页面加载进度条

    NProgress是页面跳转是出现在浏览器顶部的进度条
    官网:http://ricostacruz.com/nprogress/
    github:https://github.com/rstacruz/nprogress

    下载 nprogress

     npm install --save nprogress
    

    入口文件,main.js引入 nprogress

    import App from './App'
    import VueRouter from 'vue-router'
    import router from './router' //你的路由文件
    //引入nprogress
    import NProgress from 'nprogress' // 进度条
    import 'nprogress/nprogress.css' //这个样式必须引入
    
    Vue.use(VueRouter)
    
    // 简单配置
    NProgress.inc(0.2)
    NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })
    
    
    router.beforeEach((to,from,next) => {
      NProgress.start() 
      next()
    })
    
    router.afterEach(() => {
      NProgress.done()
    })
    
    
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })
    

    1.引入依赖:

    import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'
    

    简单的调用 start() 和 done() 方法来控制进度条。

    NProgress.start(); //开始
    NProgress.done(); // 结束
    

    2.如果想ajax请求有progress,加载vue-resource的interceptors中:

    Vue.http.interceptors.push((request, next) => {
      NProgress.start();
    
      next((response)=>{
        NProgress.done();
      });
    });
    

    3.如果想路由跳转有progress,加在vue-router的beforeEach和afterEach中:

    router.beforeEach(transition => {
      NProgress.done();
    });
    
    router.afterEach(transition => {
      NProgress.start();
    });
    

    PS: 我这里有些奇葩的是beforeEach在afterEach之后执行。。。。所以我只能在afterEach中start了。。

    修改进度条颜色
    1、在App.vue中的style中增加:

     #nprogress .bar {
          background: red !important; //自定义颜色
        }
    
  • 相关阅读:
    85个国外Ajax例子
    如何捕获方向键
    C#版对对碰[强荐]
    如何关闭移动盘的自动播放
    常用算法大全-回溯算法
    string转换成color
    常用算法大全-分而治之算法
    常用算法大全-分枝定界
    C#游戏——极品蜜蜂V1.0
    WebService传多个参数和返回多个参数的方法
  • 原文地址:https://www.cnblogs.com/wenqiangit/p/10607397.html
Copyright © 2020-2023  润新知