当我从一个组件转到另一个组件时,我试图让预加载器显示出来。我使用这个预装载机。我创建文件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,当我想调用加载程序开始时在那里编写,但它没有启动( beforeResolve预加载器中的if正在工作)。以下是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;拜托,帮我找出问题
发布于 2019-07-01 13:53:10
loader只会出现一次,因为您也只调用了show方法一次。您需要调用show方法--每个loaderStart调用并存储加载程序:
如果加载程序= null;函数loaderStart() { //则最好将这些值提取为常量加载程序= Vue.$loading.show({加载程序:'dots',颜色:'#5D00FF',zIndex: 999,};}函数loaderEnd() { loader.hide();}beforeEach钩子而不是beforeResolve钩子。
router.beforeEach((to,from,next) => { loader.loaderStart() next() });router.afterEach((to,from) => { loader.loaderEnd() });加载器API文档 (show法)
https://stackoverflow.com/questions/56812888
复制相似问题