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

如果您在浏览页面时有要求，则加载程序可以相应地工作。

df = pd.DataFrame({'text': ['Saya eat chicken', 'Saya eat chicken'], 
                   'english_word': ['eat', 'chicken'],
                   'count': [1,1]})

您可以通过这种方式使用它。

如何在Vue JS中添加加载器

2 个答案: