JS实现单页路由与导航技巧

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《JS实现单页路由与前端导航方法》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

浏览器原生支持前端路由，需用history.pushState修改URL而不刷新，监听popstate处理前进后退，代理a标签点击拦截默认跳转，并配置服务端将非资源请求均返回index.html。

浏览器原生支持 history.pushState 和 hashchange，不需要框架也能实现前端路由——关键在于拦截导航、更新视图、同步 URL，同时避免页面刷新。

用 history.pushState 替代页面跳转

直接调用 location.href = '/user' 会触发完整刷新；必须用 history.pushState 修改 URL 而不重载。它不触发 popstate，只影响地址栏和历史栈。

• 第一个参数是任意状态对象（可为 null），后续在 popstate 事件中能读取
• 第二个参数是 title（多数浏览器忽略，传空字符串即可）
• 第三个参数才是真实路径，必须是同源的相对路径（如 '/post/123'），不能是绝对 URL
• 调用后需手动渲染对应视图，pushState 本身不做任何 DOM 操作

history.pushState({ page: 'user' }, '', '/user');
// 此时 URL 变为 https://example.com/user，但页面未刷新

监听浏览器前进/后退：捕获 popstate 事件

用户点击返回按钮或调用 history.back() 时，会触发 popstate，但仅当历史记录由 pushState 或 replaceState 创建时才触发——初始页面加载不会触发。

• 必须在 DOMContentLoaded 后绑定，否则可能漏掉首次进入时的状态
• event.state 是你传入 pushState 的状态对象，可用于快速判断路由意图
• 如果没传状态，只能靠 location.pathname 解析当前路径
• 不要在 popstate 里再调用 pushState，否则会无限循环

window.addEventListener('popstate', (event) => {
  const path = location.pathname;
  if (path === '/user') renderUserPage();
  else if (path === '/post') renderPostList();
});

拦截所有内部链接点击，防止默认跳转

用户点击 仍会刷新页面。必须全局代理点击事件，对同源的相对路径链接调用 preventDefault() 并手动路由。

document.addEventListener('click', (event) => {
  const link = event.target.closest('a[href]');
  if (!link) return;
  const url = new URL(link.href);
  if (url.origin === location.origin && url.pathname !== location.pathname) {
    event.preventDefault();
    history.pushState({ path: url.pathname }, '', url.pathname);
    navigateTo(url.pathname); // 自定义渲染函数
  }
});