zoukankan      html  css  js  c++  java
  • 如何使用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、安装
    $ npm install --save nprogress 或者
    $ yarn add nprogress

    //用法
    NProgress.start();
    NProgress.done();
    2、使用
    router.js

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

    router.beforeEach((to, from, next) => {
    NProgress.start()
    next()
    })

    router.afterEach(() => {
    NProgress.done()
    })

    努力到无能为力,拼搏到感动自己。 欢迎大家在下方多多评论。
  • 相关阅读:
    JS函数机制小结
    面向对象的JS随笔
    web性能优化
    css布局
    Spark内存管理
    Scala中==,eq与equals的区别
    Java中char占用几个字节
    Java中long和double的原子性
    elk-filebeat收集docker容器日志
    Spring Boot多数据源配置(二)MongoDB
  • 原文地址:https://www.cnblogs.com/wasbg/p/11269568.html
Copyright © 2011-2022 走看看