Falando sobre a compreensão do histórico de roteamento front-end e hash

hash É  history uma pergunta muito comum em entrevistas de front-end. Muitas pessoas podem ter uma compreensão diferente de história e hash. Os campos url dos dois não têm sinal # e o outro tem sinal #. Mas você já pensou por que isso é então?Qual é a diferença entre ter # e não?Este artigo fala sobre minha compreensão do histórico de roteamento front-end e hash.

hash Ambos  history podem ser utilizados em projetos de separação front-end e back-end, e ambos possuem características e cenários de uso próprios.

1. Princípio de roteamento de front-end

1、SPA

SPA significa Aplicativo de página única . O chamado Webaplicativo de página única é um aplicativo com apenas uma Webpágina. Ao contrário de muito tempo atrás, a interação do front-end é pular em várias páginas e cada página existe de forma relativamente independente. Um aplicativo de página única deve continuar uma página Altere dinamicamente o conteúdo renderizado da página. Um aplicativo de página única (SPA) é um aplicativo que carrega uma única HTMLpágina e atualiza dinamicamente essa página conforme o usuário interage com o aplicativo . WebO navegador carregará inicialmente os necessários HTML, CSSe JavaScript, e todas as operações são feitas nesta página, controlada JavaScriptpor .

Hoje em dia, para lidar com Webo rápido desenvolvimento de aplicativos de página única, várias pilhas de tecnologia de componentes de front-end surgem infinitamente. Nos últimos anos, por meio de iterações contínuas de versão, as duas principais pilhas de tecnologia vuee reactas duas pilhas de tecnologia ganharam destaque, tornando-se as duas pilhas de tecnologia mais populares atualmente.

2. Quando o roteamento é necessário?

A maioria das estruturas usadas atualmente na China são Vue, e Vue herda a forma de desenvolvimento de aplicativos de página única. E vue-routeré vuea configuração padrão de roteamento de , e vue-routertem dois modos : hashe history.

O seguinte explicará esses dois modos, um por um.

2. Modo hash

1. Definição

hash O modo é um modo  em que o caminho da rota front-end  # é emendado com marcas de hash após o real  . urlQuando o caminho atrás do sinal de libra muda  # , o navegador não reinicia a solicitação, mas aciona  onhashchange um evento.

Por exemplo: http://127.0.0.1:8001/01-hash.html?a=100&b=20#/aaa/bbb

2. As características do haxixe

• A alteração do hash acionará o salto da página da web, ou seja, o avanço e retrocesso do navegador.

• hashEle pode ser alterado url, mas não acionará o recarregamento da página (a alteração do hash é registrada em window.history), ou seja, a página não será atualizada. Em outras palavras, todos os saltos de página são executados no lado do cliente. Portanto, isso não é considerado uma httpsolicitação, portanto, esse modo não é propício à SEOotimização. hashVocê só pode modificar #a parte posterior, portanto, só pode pular para urlo mesmo documento que o atual url.

• hashPor window.onhashchangemeio de , para monitorar hashas alterações de , de modo a realizar a função de salto sem atualização.

• hashNunca será submetido ao serverfinal (pode-se entender que só vive e morre no front end).

3. Modo de histórico

1. Definição

history API É  H5 um novo recurso que permite aos desenvolvedores alterar diretamente o roteamento do front-end , ou seja, atualizar o  URL endereço do navegador sem reiniciar a solicitação .

2. API de histórico

Várias HTML5adições são descritas abaixo history API. Os detalhes são os seguintes:

API	definição
history.pushState(dados, título [, url])	pushState é usado principalmente para adicionar um registro ao topo da pilha de histórico . Os parâmetros são analisados ​​da seguinte forma: ①data será passado como parâmetro quando o evento onpopstate for acionado; ②title é o título da página, e todos os navegadores atuais irão ignorar este parâmetro; ③url é o endereço da página, que é opcional, e será o endereço da página atual se estiver faltando
history.replaceState(dados, título [, url])	Altere o histórico atual, os parâmetros são os mesmos acima; o pushState acima é adicionado, esta alteração
história.estado	É usado para armazenar os dados dos métodos acima, e as permissões de leitura e gravação de diferentes navegadores são diferentes
window.onpopstate	Resposta a chamadas pushState ou replaceState

3. As características da história

Para history, as principais características são as seguintes:

• O new urlpode ser urlqualquer um da mesma origem que o current url, ou pode ser o urlmesmo endereço do current , mas isso causará um problema de que a operação repetida será gravada na pilha.
• Passe history.state, adicione qualquer tipo de dado ao registro.
• Propriedades adicionais podem ser definidas titlepara uso subsequente.
• Através de pushState, replaceStatepara realizar a função de nenhum salto de atualização.

4. Há problemas

Para history, resolve muitos dos hashproblemas existentes de , mas também traz novos problemas. detalhes como segue:

• Ao usar historyo modo, ao atualizar a página atual, o navegador reiniciará a solicitação. Se nginxnão houver correspondência para obter o atual url, 404a página de aparecerá.
• Quanto hashao esquema, ele parecerá alterado url, mas não será incluído na httpsolicitação. Portanto, ele é usado para guiar as ações do navegador e não afeta o lado do servidor. Portanto, a alteração hashrealmente não muda url, portanto, o caminho da página ainda é o caminho anterior e nginxnão será interceptado.
• Portanto, ao usar historyo modo, é necessário permitir que o endereço seja acessível através do servidor .Se não for definido, levará facilmente à 404situação que aparece.