js escribe un oyente de ruta

Para implementar un oyente de ruta simple, puede usar el propio window.locationobjeto y window.addEventListener()método del navegador. Los pasos específicos son los siguientes:

1. Cree una función para manejar eventos de cambio de ruta. Esta función necesita obtener la ruta en la URL actual y realizar diferentes operaciones de acuerdo con diferentes rutas.
2. Llame a esta función una vez, después de que se haya cargado la página, para inicializar la página.
3. Use window.addEventListener()el método para escuchar hashchangeel evento, que se activará cuando cambie el valor hash de la URL, y luego llame a la función de procesamiento definida anteriormente.

Aquí hay un código de muestra simple:

function handleRouting() {
  var path = window.location.pathname;

  // 根据不同的路径执行不同的操作
  switch (path) {
    case '/':
      // 处理根路径
      break;
    case '/about':
      // 处理关于页面
      break;
    case '/contact':
      // 处理联系页面
      break;
    default:
      // 处理其他未知路径
      break;
  }
}

// 页面加载完成后调用一次
handleRouting();

// 监听 hashchange 事件
window.addEventListener('hashchange', handleRouting);

Cabe señalar que en este ejemplo solo monitoreamos la parte de la ruta de la URL. Si necesita monitorear la URL completa, incluidos los parámetros de consulta y los valores hash, puede usar el atributo window.location.href.