首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >预加载器vue.js工作中的几个问题

预加载器vue.js工作中的几个问题
EN

Stack Overflow用户
提问于 2019-06-28 20:27:53
回答 1查看 1.3K关注 0票数 2

当我从一个组件转到另一个组件时,我试图让预加载器显示出来。我使用这个预装载机。我创建文件loader.js并在其中写入:

代码语言:javascript
复制
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

代码语言:javascript
复制
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;

拜托,帮我找出问题

EN

回答 1

Stack Overflow用户

发布于 2019-07-01 13:53:10

  1. 您的当前loader只会出现一次,因为您也只调用了show方法一次。您需要调用show方法--每个loaderStart调用并存储加载程序: 如果加载程序= null;函数loaderStart() { //则最好将这些值提取为常量加载程序= Vue.$loading.show({加载程序:'dots',颜色:'#5D00FF',zIndex: 999,};}函数loaderEnd() { loader.hide();}
  2. 可能您有一些异步组件,因为您将加载程序添加到路由逻辑中,因此您应该使用beforeEach钩子而不是beforeResolve钩子。 router.beforeEach((to,from,next) => { loader.loaderStart() next() });router.afterEach((to,from) => { loader.loaderEnd() });

加载器API文档 (show法)

Vue-路由器警卫

Vue-路由器导航流

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56812888

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档