vue.js - 预加载器vue.js的工作问题
问题描述
当我从一个组件转到另一个组件时,我正在尝试显示预加载器。我使用这个预加载器。我创建文件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}
loader,js
我导入到index.js
那里,当我想调用加载程序启动但它没有启动(预加载程序中没有工作)时,我写if
了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;
请帮我找出问题
解决方案
您的 current
loader
将只出现一次,因为您也调用了show
一次方法。您需要在show
每次loaderStart
调用时调用方法并存储加载器:let loader = null; function loaderStart() { // it would be better to extract these values as constants loader = Vue.$loading.show({ loader: 'dots', color: '#5D00FF', zIndex: 999, }); } function loaderEnd() { loader.hide(); }
可能你有一些异步组件,因为你将加载器添加到路由逻辑,所以你应该使用
beforeEach
钩子而不是钩子beforeResolve
。router.beforeEach((to, from, next) => { loader.loaderStart() next() }); router.afterEach((to, from) => { loader.loaderEnd() });
加载器 API 文档(show
方法)
推荐阅读
- solr - 在 Lucene 中搜索逗号分隔的文本
- eclipse-plugin - Eclipse PDE:在我的插件中的 Oxygen 更新 javafx 实现后引发 Classnotfound 异常
- javascript - mapStateToProps 将数据传递给道具
- c# - 类型参数不是从上下文中推断出来的
- scala - 在 `LabelledGeneric` 等中使用 `String` 而不是 `Symbol`
- ios - wkWebView 加载请求失败,错误域=NSURLErrorDomain 代码=-999
- c# - Wacom Signature SDK 重新设计按钮
- javascript - 异步行为。递归 setTimeout 未完成
- firebase - Firebase 检查部署的文件
- rust - 为什么我的 actix 主管不重试停止的演员?