vue 路由跳轉進度條 Nprogress.js
阿新 • • 發佈:2019-02-13
安裝Nprogress
npm install nprogress -S
在main.js中引入Nprogress
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
路由攔截器裡使用Nprogress
注意在router.beforeEach
裡一定要加上next()
否則路由不會跳轉
router.beforeEach((to, from, next) => {
NProgress.start();
next()
});
router.afterEach(transition => {
NProgress.done();
}) ;
main.js檔案最後如下
import Vue from 'vue'
import App from './App'
import router from './router'
import Mixin from './mixins';
import filters from './filters';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
Vue.mixin(Mixin);
Vue.config.productionTip = false
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));
router.beforeEach((to, from, next) => {
NProgress.start();
next()
});
router.afterEach(transition => {
NProgress.done();
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})