美文网首页
vue+element-ui设置nprogress页面加载进度条

vue+element-ui设置nprogress页面加载进度条

作者: 前端阿峰 | 来源:发表于2020-07-29 11:25 被阅读0次

    入口文件,main.js引入 nprogress

    import App from './App'
    import VueRouter from 'vue-router'
    import router from './router' //你的路由文件
    
    import NProgress from 'nprogress'//引入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)
    })
    

    相关文章

      网友评论

          本文标题:vue+element-ui设置nprogress页面加载进度条

          本文链接:https://www.haomeiwen.com/subject/gzlhrktx.html