主页 / 问题 / 997515
Accepted
Tick-Tack
Asked:2020-06-29 02:28:50 +0800 CST2020-06-29 02:28:50 +0800 CST

预加载器 vue.js 的问题

  • 772

大家好。我试图在组件之间转换时显示预加载器。我使用这个预加载器。正如我所做的那样，我创建了一个包含以下内容的文件 loader.js：

import Vue from 'vue';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

Vue.use(Loading);

let loader = Vue.$loading.show({
    loader: 'dots',
    color: '#5D00FF',
    zIndex: 999,
}); 
function loaderStart() {
    loader;
}
function loaderEnd() {
    loader.hide();
}

export default {loaderStart, loaderEnd}

我将文件本身导入 index.js 并在我想调用加载器的开始和结束时写入其中，但由于某种原因预加载器没有启动（我在预加载器中没有条件检查它beforeResolve）。下面是 index.js 的内容：

import Vue from 'vue'
import Router from 'vue-router'
import Authorization from '@/components/Authorization'
import Main from '@/components/Main'
import loader from './loader'

Vue.use(Router)

const router = new Router({
    routes: [
    {
        path: '/',
        name: 'Main',
        component: Main,
    },
    {
        path: '/authorization',
        name: 'Authorization',
        component: Authorization
    }
  ]
})
router.beforeResolve((to, from, next) => {
    if(to.path) {
        loader.loaderStart()
    }
    next()
});
router.afterEach((to, from) => {
    loader.loaderEnd()
});
export default router;

请告诉我，可能是什么问题？

vue.js

1 个回答

  1. Best Answer

    您的代码更改最少：

    // loader.js

function loaderStart() {
  loader.isActive = true;
}

function loaderEnd() {
  loader.isActive = false;
}

    // index.js

router.afterEach((to, from) => {
  setTimeout(function() {
    loader.loaderEnd();
  }, 888);
});

    以下是基于插件作者ankurk91的帖子的变体。在一个片段中，这样它就不会占用太多空间。

    import Vue from 'vue';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

// Устанавливаем плагин `Loading`,
// используя глобальный метод `use` с
// передачей дополнительных параметров
Vue.use(Loading, {
  loader: 'dots',
  color: '#5D00FF',
  zIndex: 999,
});

// Создадим пустую ссылку.
let loader = null;

// Показать прелоадер.
function showLoader() {
  // Используем локальную функцию
  // для скрытия прелоадера.
  hideLoader();

  // Показываем прелоадер,
  // используя метод `show` самого плагина,
  // установленного глобально во Vue.
  loader = Vue.$loading.show();
}

// Скрыть прелоадер.
function hideLoader() {
  // Если ссылка не пуста,
  // т.е. существует предыдущий прелоадер.
  if (loader) {
    // а) скрываем прелоадер,
    // используя метод `hide` компонента плагина.
    loader.hide();

    // б) удаляем ссылку на объект.
    loader = null;
  }
}

// Экспортируете как вам удобнее:
// объектом или отдельными функциями.
export default {
  loaderStart: showLoader,
  loaderEnd: hideLoader
}

    编写此答案时使用的资源：Vue API，如何将其与 vue 路由器一起使用，探索 JavaScript 中 null 和 undefined 的深渊。

    • 2

相关问题