iview+vue 加载进度条

效果：浏览器最上方出现一个进度条。

main.js

import Vue from 'vue'

import ViewUI from 'view-design';

import router from './router/index.js'
Vue.use(ViewUI);
//等待进度条

router.beforeEach((to, from, next) => {

    ViewUI.LoadingBar.start();

    next();

});

router.afterEach(route => {

    ViewUI.LoadingBar.finish();

});

具体使用的方法里使用

handleSubmit() {

　　//开始进度条

　　this.$Loading.start();

　　　　testFuncton(parm).then(res => {

　　　　　　if (res.success == true) {

　　　　　　　　//关闭进度条

　　　　　　　　this.$Loading.finish();

　　　　　　　　this.$Message.success('保存成功!');

　　　　　　} else {

　　　　　　　　//方法出错进度条异常

　　　　　　　　this.$Loading.error();

　　　　　　　　this.$Message.error(res.message);

　　　　　　}
　　　　}).catch(error => {

              this.$Message.success('保存失败，请联系管理员!');

　　　　});

},