站群管理谷歌在线浏览入口

🕳️ 今日穿梭指南：两种维度の路由宇宙

1. Hash 模式：锚点の量子隧道

// 手动创建路由监听器  
window.addEventListener('hashchange', () => {  const path = location.hash.slice(1) || '/';  console.log('进入哈希宇宙:', path);  renderComponent(path);  
});  // 编程式导航  
function navigateTo(path) {  location.hash = `#${path}`;  
}  // 初始化路由  
if (!location.hash) navigateTo('/home');  

🔔 宇宙特性：

• URL 格式：http://domain.com/#/home
• 优点：
  • 兼容性强（IE8+）
  • 无需服务器配置
• 缺点：
  • URL 不够优雅
  • 锚点功能冲突风险

---

2. History 模式：时空操纵术

// 监听历史记录变化  
window.addEventListener('popstate', (e) => {  const path = location.pathname;  console.log('时空回退至:', path);  renderComponent(path);  
});  // 主动跳转（不触发页面刷新）  
function historyPush(path) {  history.pushState({ key: Date.now() }, '', path);  renderComponent(path); // 需手动触发渲染  
}  // 拦截链接点击事件  
document.body.addEventListener('click', (e) => {  if (e.target.tagName === 'A') {  e.preventDefault();  historyPush(e.target.href);  }  
});  

🔔 高阶法则：

• URL 格式：http://domain.com/home
• 必须配置服务器：

  # Nginx 配置  
  location / {  try_files $uri $uri/ /index.html;  
  }