js如何监听路由变化 单页应用路由变化监听技巧

window.addEventListener('hashchange', function(event) {
  // event.oldURL：之前的完整 URL
  // event.newURL：现在的完整 URL
  console.log('路由改变了！');
  console.log('旧的 URL：', event.oldURL);
  console.log('新的 URL：', event.newURL);

  // 在这里编写处理路由变化的代码，例如更新页面内容
  updatePageContent(window.location.hash);
});

function updatePageContent(hash) {
  // 根据 hash 值来加载不同的内容
  switch (hash) {
    case '#/home':
      // 加载首页内容
      console.log('加载首页');
      break;
    case '#/about':
      // 加载关于页面内容
      console.log('加载关于页面');
      break;
    default:
      // 加载默认内容或显示 404 页面
      console.log('加载默认页面或 404');
  }
}

// 监听 popstate 事件
window.addEventListener('popstate', function(event) {
  // event.state：通过 pushState 或 replaceState 传递的状态对象
  console.log('popstate 事件触发！');
  console.log('状态对象：', event.state);

  // 在这里编写处理路由变化的代码，例如更新页面内容
  updatePageContent(window.location.pathname);
});

// 使用 pushState 修改 URL
function navigateTo(path, state) {
  history.pushState(state, null, path); // 第一个参数是状态对象，第二个参数是标题（已废弃），第三个参数是 URL
  updatePageContent(path);
}

function updatePageContent(pathname) {
  // 根据 pathname 来加载不同的内容
  switch (pathname) {
    case '/home':
      // 加载首页内容
      console.log('加载首页');
      break;
    case '/about':
      // 加载关于页面内容
      console.log('加载关于页面');
      break;
    default:
      // 加载默认内容或显示 404 页面
      console.log('加载默认页面或 404');
  }
}

// 示例：点击链接时，使用 navigateTo 修改 URL
document.getElementById('home-link').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认的链接跳转行为
  navigateTo('/home', { page: 'home' }); // 跳转到 /home，并传递状态对象
});

document.getElementById('about-link').addEventListener('click', function(event) {
  event.preventDefault();
  navigateTo('/about', { page: 'about' });
});

// 在页面加载完成后，手动处理初始路由
window.addEventListener('load', function() {
  updatePageContent(window.location.pathname);
});

// 在 pushState 中传递状态对象
history.pushState({ scrollPosition: 0 }, null, '/home');

// 在 popstate 事件中获取状态对象
window.addEventListener('popstate', function(event) {
  const scrollPosition = event.state.scrollPosition;
  // 恢复滚动位置
  window.scrollTo(0, scrollPosition);
});

function updatePageContent(pathname) {
  switch (pathname) {
    case '/home':
      // 加载首页内容
      break;
    case '/about':
      // 加载关于页面内容
      break;
    default:
      // 加载 404 页面
      load404Page();
  }
}

function routeGuard(pathname) {
  if (pathname === '/admin' && !isLoggedIn()) {
    // 如果用户未登录，并且尝试访问 /admin 页面，则跳转到登录页面
    navigateTo('/login');
    return false; // 阻止继续执行
  }
  return true; // 允许继续执行
}

function updatePageContent(pathname) {
  if (!routeGuard(pathname)) {
    return; // 如果路由守卫返回 false，则不加载页面内容
  }

  switch (pathname) {
    case '/home':
      // 加载首页内容
      break;
    case '/about':
      // 加载关于页面内容
      break;
    case '/admin':
      // 加载管理页面内容
      break;
    default:
      // 加载 404 页面
      load404Page();
  }
}