咨询Go-Admin（SPA）中jQuery脚本页面切换后重初始化的实现方案

针对Go-Admin SPA页面切换后自定义jQuery脚本不执行的问题，以下是几种可靠的解决方案：

方案1：利用Go-Admin官方页面切换钩子 #

Go-Admin内置了页面切换相关的事件钩子，直接监听即可触发脚本初始化：

• 标签页切换场景，监听admin.tab.change事件：

$(document).on('admin.tab.change', function() {
  initCustomJqueryScripts();
});

• 全局路由跳转场景，借助Go-Admin基于Vue的特性，监听路由后置守卫：

// Go-Admin的Vue路由实例挂载在window.admin下
window.admin.$router.afterEach(() => {
  // 延迟100ms确保DOM渲染完成
  setTimeout(initCustomJqueryScripts, 100);
});

方案2：DOM变化监听（通用SPA兼容方案） #

如果找不到官方钩子，用MutationObserver监听页面内容区的DOM更新，自动触发脚本：

// 目标容器：Go-Admin的主内容区域，根据实际DOM结构调整
const contentContainer = document.querySelector('.admin-content');

// 配置监听规则：监听子节点变化及后代节点
const observerConfig = { childList: true, subtree: true };

// DOM变化时执行初始化
const domChangeCallback = (mutations) => {
  if (mutations.some(m => m.addedNodes.length > 0)) {
    initCustomJqueryScripts();
  }
};

// 启动监听
const observer = new MutationObserver(domChangeCallback);
observer.observe(contentContainer, observerConfig);

// 封装自定义jQuery逻辑为初始化函数
function initCustomJqueryScripts() {
  // 替换成你的实际代码，比如：
  $('.custom-toggle').on('click', function() {
    $(this).toggleClass('active');
  });
  // 其他DOM操作...
}

// 首次加载执行
$(document).ready(initCustomJqueryScripts);

方案3：路由事件监听 #

根据Go-Admin的路由模式选择对应事件监听：

• Hash模式路由：

window.addEventListener('hashchange', () => {
  setTimeout(initCustomJqueryScripts, 100);
});

• History模式路由：

window.addEventListener('popstate', () => {
  setTimeout(initCustomJqueryScripts, 100);
});

同样在页面首次加载时执行一次初始化：

$(document).ready(initCustomJqueryScripts);

关键注意点 #

• 务必将所有自定义jQuery逻辑封装成独立函数，避免重复代码，同时便于多场景调用。
• 加入短延迟是为了确保SPA页面切换后DOM已完全渲染，避免出现元素找不到的情况。
• 使用MutationObserver时，若需在特定场景停止监听，可调用observer.disconnect()避免内存泄漏。

内容的提问来源于stack exchange，提问作者scaryhamid