Enrutamiento frontal (1): conocimientos básicos
URI: Identificador uniforme de recursos Identificador uniforme de recursos; consta de 5 partes:
URI = esquema:[//autoridad]ruta[?query][#fragmento]
Esquema: los protocolos comunes incluyen
puerto se refiere al número de puerto. Si no se especifica, se utiliza el número de puerto predeterminado. El número de puerto predeterminado para http es 80 y el número de puerto predeterminado para https es. 443.
ruta: se refiere a la ruta del archivo, especifique la ruta del archivo en el servidor para acceder a recursos específicos
consulta: cadena de consulta, también conocida como valor de búsqueda, obtendrá los parámetros de la interfaz se transmitirá a través de esta parte
fragmento: Los identificadores de fragmento, también conocidos como valores hash, generalmente se usan para marcar los subrecursos de los recursos adquiridos y no se pasarán al servidor. Respecto a la codificación:
Los URI utilizan signos de porcentaje. Para los caracteres que deben codificarse, represéntelos como 2 caracteres hexadecimales y luego agregue el carácter de escape % delante de ellos.
>Dos API de codificación:
encodeURI y encodeURIComponent: el rango de codificación de encodeURI es menor que el de encodeURIComponent, donde encodeURI es un estándar w3c.
El objeto window.history tiene muchos atributos, los más importantes son:
longitud de solo lectura: número;
estado de solo lectura: cualquiera;
Método:
pushState(estado: cualquiera, título: cadena, url?: cadena | nulo): void;
replaceState(estado: cualquiera, título: cadena, url ?: cadena | nulo): void;
go(delta: número): void y back():void():void;
El primer parámetro debe ser El tipo de datos que se copia estructurado (copia estructurada: JSON que puede manejar referencias circulares) se almacenará de forma persistente en el navegador y se volverá a extraer cada vez que se genere la página (perteneciente a la copia profunda implementada por el navegador) )
? El título del segundo parámetro es una cadena, que se utiliza para marcar el método actual
La URL del tercer parámetro puede ser una cadena simple o un objeto de URL. Tenga en cuenta que este método está restringido. Según la misma política de origen, la URL debe tener el mismo origen que el href actual; de lo contrario, se informará un error. No es necesario pasar este parámetro. De lo contrario, simplemente operará la pila del historial del navegador.
Función del método: genera una nueva pila de historial y apunta el puntero a ella. La operación no actualizará el navegador, lo que significa que este método cambiará la longitud de la pila de historial y el objeto de estado;
p>
Los parámetros de replaceState son exactamente los mismos que los de pushState, y el método de uso es similar, pero su función es reemplazar la pila del historial actual, lo que significa que el puntero y la longitud de la pila del historial no cambiar, y su función es solo reemplazar la URL y el estado actuales.
Los métodos pushState y replaceState tienen varios métodos de paso de parámetros de URL, que pueden ser rutas absolutas o relativas, o el valor de búsqueda de la cadena de consulta "?xxx" y el identificador de fragmento "#xxx" ", su característica más importante. es operar la URL del navegador, los atributos de estado y longitud del objeto de historial, pero no hará que el navegador salte.
Cuando los métodos pushState y replaceState operan la URL en una ruta relativa, se verán afectados por el href del elemento
El método de salto del navegador gira principalmente en torno a los dos objetos window.location y window.history.
1)? window.history
window.history.go(delta: number): void
Mueve el puntero de la pila del historial del navegador y actualiza la página.
ventana.historia.back() ===? ventana.historia.go(-1)
ventana.historia.adelante() === ventana.historia.go( 1 )
2) ventana.ubicación
ventana.ubicación.href
obtener :() =>cadena;
establecer : (url: string) => void; // Activa el salto del navegador y aumenta la pila del historial sin aceptar la misma restricción de política de origen
window.location.hash
get: () = > string;
set: (hash: string) => void;?
Similar a href, la diferencia es que se usa para modificar el valor hash de la navegación del navegador bar URL, que generará una nueva pila de historial, pero no activará una actualización de la página del navegador, y cuando el valor hash establecido es el mismo que el valor hash de la URL actual, no sucederá nada (lo que equivale a no ejecutar).
window.location.replace
Este es un método puro, su función es reemplazar el registro de pila del navegador actual, configurarlo para que pase la nueva URL y actualizar el página.
reemplazar puede operar en hash y desencadenar eventos correspondientes, y no se verá afectado por las reglas del mismo hash
1) ¿evento popstate?
historial? .pushState En el registro de pila histórico generado por History.replaceState, si el puntero de la pila se mueve o se hace clic en el botón de avance o retroceso del navegador, se activará el evento popstate. Puede agregar detectores de eventos a través de window.addEventListener.
El atributo más crítico del objeto de evento obtenido por popstate es event.state. Este event.state se toma directamente de la memoria subyacente del navegador (una copia profunda), en lugar del estado en la pila del historial. , por lo que modificar directamente el estado de la pila del historial no afectará a event.state (y viceversa).
Configurar el mismo location.hash dos veces antes y después no activará dos eventos popstate, pero configurar el mismo hash dos veces a través de location.href puede activar dos eventos popstate, pero la pila del historial solo un adicional. Se agregará la capa.
2) evento de cambio de hash
Lo que monitorea el tiempo de cambio de hash es el cambio del identificador de fragmento de la URL del navegador, es decir, el cambio del valor hash El evento del objeto de evento puede. Obtenga las claves oldUrl y newUrl, que representan la URL antes del salto hash y la URL después del salto.
Incluso si el método pushState solo cambia el valor hash del navegador, no activará el evento hashchange.
Ambos eventos se pueden activar a través del método window.dispatchEvent. El método despachoEvent necesita pasar un objeto de evento:
window.dispatchEvent(new PopStateEvent()); >
Lo mismo se aplica a los eventos hashchang:
window.dispatchEvent(new HashChangeEvent());