美文网首页移动端Vuevue
nprogress页面加载进度条

nprogress页面加载进度条

作者: meng_281e | 来源:发表于2018-08-01 09:56 被阅读6853次

    入口文件,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)
    })
    

    相关文章

      网友评论

        本文标题:nprogress页面加载进度条

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