在现代前端开发中，优化页面加载性能至关重要。Vue Router与jQuery都是常用的前端工具，利用它们实现History路由并防止页面切换时重复加载公共代码，能显著提升用户体验。

Vue Router是Vue.js官方的路由管理器，它提供了强大的路由功能，其中History模式可以让URL看起来更加美观和自然。而jQuery则以其简洁易用的DOM操作和事件处理能力闻名。

配置Vue Router的History模式。在Vue Router的配置文件中，将mode设置为'history'。这样，浏览器的历史记录会以真实路径的形式展示，而不是默认的hash模式。例如：

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
});

接下来，使用jQuery处理页面切换事件。通过监听路由切换事件，我们可以在页面切换时执行相应操作。例如，我们可以在切换到新页面时，判断是否需要加载公共代码。如果公共代码已经加载过，就避免重复加载。

$(document).ready(function() {
  $(window).on('popstate', function() {
    const currentPath = window.location.pathname;
    // 在这里判断是否需要重新加载公共代码
    if (!alreadyLoadedCommonCode(currentPath)) {
      // 加载公共代码的逻辑
      loadCommonCode();
    }
  });
});

为了实现判断公共代码是否已加载，可以使用一个全局变量或者在本地存储中记录相关信息。例如：

const loadedPaths = [];

function alreadyLoadedCommonCode(path) {
  return loadedPaths.includes(path);
}

function loadCommonCode() {
  // 实际的公共代码加载逻辑，如加载CSS、JS文件等
  // 加载完成后将当前路径记录下来
  const currentPath = window.location.pathname;
  loadedPaths.push(currentPath);
}

通过上述方法，我们结合Vue Router的History模式与jQuery的事件处理能力，有效地防止了页面切换时公共代码的重复加载。不仅优化了页面加载速度，还减少了服务器的负担，为用户带来更流畅的浏览体验。在实际项目中，根据具体需求进一步完善和扩展这些逻辑，能更好地提升项目的性能和质量。