Vue.js页面切换预加载器无法正常启动问题排查求助

我看了你的代码，问题主要出在loader.js的实现逻辑上，和路由里的if判断关系不大——先给你拆解一下问题根源，再给出修复方案：

问题分析 #

1. 预加载器实例被提前创建且无法复用
   你在loader.js的模块初始化阶段就直接调用了Vue.$loading.show()，这会在项目启动时就创建并显示一次加载器。当你调用loaderEnd()隐藏它之后，这个实例已经处于销毁/隐藏状态，后续调用loaderStart()只是引用这个失效的实例，不会重新触发显示。

2. loaderStart函数没有实际执行显示操作
   你的loaderStart()函数只是返回了loader变量，没有任何启动加载器的逻辑——相当于啥也没做，这也是为什么去掉if判断后看似能工作，其实是初始化时的加载器还没被隐藏，并不是路由触发的。

修复后的loader.js代码 #

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

Vue.use(Loading);

// 用变量保存加载器实例，避免重复创建
let loaderInstance = null;

function loaderStart() {
  // 如果已有实例，先隐藏再创建新的（防止重复叠加）
  if (loaderInstance) {
    loaderInstance.hide();
  }
  // 每次启动时创建新的加载器实例
  loaderInstance = Vue.$loading.show({
    loader: 'dots',
    color: '#5D00FF',
    zIndex: 999,
  });
}

function loaderEnd() {
  // 确保实例存在时再执行隐藏，避免报错
  if (loaderInstance) {
    loaderInstance.hide();
    loaderInstance = null; // 清空实例，防止内存泄漏
  }
}

export default { loaderStart, loaderEnd }

路由文件的优化（可选） #

你路由里的if(to.path)判断其实是多余的，因为to对象必然包含path属性，直接调用启动逻辑即可：

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) => {
  loader.loaderStart()
  next()
});

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

export default router;

为什么这样能解决问题？ #

• 我们把加载器实例的创建逻辑移到了loaderStart()函数内部，确保每次路由切换时都会生成一个新的（或重置的）加载器实例。
• 增加了实例的判空处理，避免重复创建或调用不存在的实例方法导致报错。
• 移除了不必要的to.path判断，让路由钩子逻辑更简洁。

内容的提问来源于stack exchange，提问作者Tick-Tack