如何在 vue js 中添加加载器答案

【问题标题】：How to add loader in vue js如何在 vue js 中添加加载器
【发布时间】：2020-05-13 17:39:08
【问题描述】：

如何在 VUE js 和 Laravel 中添加加载效果。这是 vuejs 中的单页网站，我想在更改路线时添加加载器。

意味着当我点击另一个路由器时，需要时间来获取数据并显示，同时我想显示加载器。或者当我提交表单时，我需要时间提交，同时我想添加加载器。

意味着当我点击另一个路由器时，需要时间来获取数据并显示，同时我想显示加载器。或者当我提交表单时，我需要时间提交，同时我想添加加载器。意味着当我点击另一个路由器时，需要时间来获取数据并显示，同时我想显示加载器。或者当我提交表单时，我需要时间提交，同时我想添加加载器。意味着当我点击另一个路由器时，需要时间来获取数据并显示，同时我想显示加载器。或者当我提交表单时，我需要时间提交，同时我想添加加载器。

请在 VUE js + Laravel 中提供帮助

【问题讨论】：

标签： laravel vue.js loader preloader

【解决方案1】：

如果您在浏览页面时发出请求，加载程序可以相应地工作。

<script>
export default {
    data: () => ({
        loaderIsActive: false,
        items: null,
    }),

    mounted() {
        this.fetch();
    },

    methods: {
        async fetch() {
            this.loaderIsActive = true;
            this.items = await axios.post('YOUR API');
            this.loaderIsActive = false;
        }
    }
}

这样就可以使用了。

【讨论】：

【解决方案2】：

在您的 app.js 文件中添加这行代码

router.beforeEach((to, from, next) => {
   // add loader
   next()
})
router.afterEach(() => {
  // terminate you loader
})

所以完整的文件是

window.Vue = require('vue');
import VueRouter from 'vue-router';
import VueProgressBar from 'vue-progressbar'

window.Fire =  new Vue();

Vue.use(VueProgressBar, {
    color: 'rgb(143, 255, 199)', //normal color for progress bar
    failedColor: 'red', //color for failed progress bar
    height: '2px'//height of progress bar can be changed here
})


Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
Vue.use(VueRouter);

window.Fire =  new Vue();


let routes = [

    {
        path: '/',
        name: 'posts',
        component: post,
    },
    {
        path: '/general',
        name: 'dashboard',
        component: Dashboard,
    },
   

];

let router = new VueRouter({

    routes // short for `routes: routes`
});


router.beforeEach((to, from, next) => {
  // add loader
 VueProgressBar .start();
 next()
})
router.afterEach(() => {
 // terminate you loader
  VueProgressBar.finish();
})

const app = new Vue({

    el: '#app',
    router,
    data: {},
    methods: {}
});

window.Fire = new Vue();

【讨论】：