当前位置 主页 > 服务器问题 > win服务器问题汇总 >

    Vue使用NProgress的操作过程解析

    栏目:win服务器问题汇总 时间:2019-12-01 10:21

    这篇文章主要介绍了Vue使用NProgress的操作过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    NProgress是页面跳转是出现在浏览器顶部的进度条

    官网:http://ricostacruz.com/nprogress/

    github:https://github.com/rstacruz/nprogress

    绿色的进度条就是NProgress实现的效果

    安装

    $ npm install --save nprogress 或者
    $ yarn add nprogress
    
    //用法
    NProgress.start();
    NProgress.done();

    使用

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

    在App.vue中的style中增加:

      #nprogress .bar {
       background: red !important; //自定义颜色
      }

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持IIS7站长之家。