如何在vue js中添加加载器

Question

如何在VUE js + Laravel中添加加载效果。这是一个在vuejs的单页网站，我想添加加载器，当我改变路线。

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

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

请在VUE js + Laravel中帮助

Answer 1

将此行代码添加到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();

Answer 2

如果您在浏览页面时进行请求，加载器可以相应地工作。

<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;
        }
    }
}

​

这样你就可以使用它了。