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()
    })

    努力到无能为力,拼搏到感动自己。 欢迎大家在下方多多评论。
  • 相关阅读:
    关于vue中如何实现排到他思想
    js 文件下载
    js文件上传
    webpack学习笔记
    this总结
    React中props与state
    js事件总结
    js深拷贝与浅拷贝
    JS设计模式之观察者模式
    ES5与ES6的继承
  • 原文地址:https://www.cnblogs.com/wasbg/p/11269568.html
Copyright © 2011-2022 走看看