如何使用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()
})
版权声明：本文为wasbg原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。