如何用jQuery实现无整页加载页面，解决刷新后页面失效问题

这个需求完全可以通过jQuery实现，你当前遇到的刷新失效问题，是因为两个核心逻辑缺失：一是没有处理页面初始化时的路由解析逻辑，二是没有配置服务端路由重定向规则，具体修复方案如下：

问题根因 #

你通过history.pushState修改了浏览器地址栏的URL，但这个自定义URL在服务器上不存在对应的实体静态文件，刷新时浏览器会直接向服务器请求这个不存在的路径，自然会返回404错误。同时你没有在页面加载时根据当前URL自动加载对应内容，就算服务端返回了入口页面，也不会自动渲染对应内容。

前端代码修正 #

你原有代码需要补充3部分逻辑：阻止a标签默认跳转行为、监听浏览器前进后退的popstate事件、页面初始化时自动解析路由加载内容，修正后代码如下：

// 封装加载页面内容的公共方法
function loadPage(path) {
  $.ajax({
    url: path + '.html',
    success: function (result) {
      $(".pageWrapper").html(result);
      // 如果子页面有初始化逻辑，可以在这里调用
    },
    error: function() {
      // 加载失败时显示404内容
      $(".pageWrapper").html('<p>页面不存在</p>');
    }
  });
}

// 页面初始化时，解析当前路径加载对应内容
$(function() {
  // 取出当前路径中最后一段作为路由标识，你可以根据自己的路由规则调整解析逻辑
  const currentPath = window.location.pathname.split('/').pop();
  if (currentPath && currentPath !== 'index.html' && currentPath !== '/') {
    loadPage(currentPath);
  } else {
    // 默认加载首页内容
    loadPage('home');
  }
})

// 监听a标签点击事件
$(document).on("click", "a", function (e) {
  // 阻止a标签默认跳转行为
  e.preventDefault();
  const url = $(this).attr("data-url-redirect");
  if (!url) return;

  loadPage(url);

  // 修改浏览器地址栏URL
  if (history.pushState) {
    const newurl = window.location.origin + window.location.pathname.replace(/[^/]*$/, '') + url;
    window.history.pushState({ path: newurl }, "", newurl);
  }
});

// 监听浏览器前进后退事件
window.addEventListener('popstate', function(e) {
  if (e.state?.path) {
    const path = e.state.path.split('/').pop();
    loadPage(path);
  }
});

服务端配置补充 #

你需要配置服务端，将所有属于这个单页应用的请求，都重定向到你的单页入口文件（通常是index.html），以下是常见服务端的配置示例：

• Nginx配置：在站点配置中添加如下规则

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• Apache配置：在站点根目录新建.htaccess文件，添加如下规则

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </IfModule>
  

注意事项 #

• 所有子页面的html文件只需存放主体内容，不要包含公共的head、导航、页脚代码
• 如果子页面有专属的JS逻辑，可以将JS代码打包在入口文件中，也可以在loadPage的success回调中手动加载执行
• 如果你的站点部署在二级目录下，需要对应调整路由解析和服务端重定向的规则

内容的提问来源于stack exchange，提问作者Ghayas Ud Din