O uso e comparação do modo histórico e do modo hash no vue-router

Este artigo apresenta principalmente como o vue-router implementa a configuração do modo de histórico, que tem um bom valor de referência e espera ser útil para todos. Se houver algum erro ou considerações incompletas, por favor me avise

configuração do modo histórico do vue-router

I. Visão geral

Vue-router pode definir dois modos:hash和history

const router = new VueRouter({
    
     
  mode: "hash", 
  // mode: "history", 
  routes 
});

Se você usar o modo hash, geralmente nenhuma configuração especial será necessária;

Mas se você quiser usar o modo de histórico, precisará fazer algumas configurações no front-end e no lado do servidor;

Geralmente não há problema com a depuração local ao usar o modo de histórico, mas uma vez que é liberado para um ambiente de teste ou produção, uma tela branca ou uma tela branca aparecerá quando a página for atualizada. Esse problema ocorre porque o front-end e o final do servidor não foram configurados de acordo.

2. Como configurar o modo histórico

2.1. Configuração do front-end
Primeiramente, defina mode和baseos dois valores​​​da rota, conforme a seguir:

const routes = [...] 
const router = new VueRouter({
    
    
  mode: "history",
  base: process.env.BASE_URL,  // 如果使用history模式，必须设置base参数
  routes
});
 
export default router;

Em segundo lugar, defina o vue.config.jspublicPath da seguinte forma:

module.exports = {
    
    
  // publicPath默认值是'/'，即你的应用是被部署在一个域名的根路径上
  // 设置为'./'，可以避免打包后的静态页面空白
  // 当在非本地环境时，这里以项目test-daily为例，即打包后的h5项目部署服务器的test-daily目录下
  // 那么这里就要把publicPath设置为/test-daily/，表示所有的静态资源都在/test-daily/里
  // 打包部署后，会发现index.html引用的静态资源都添加了路径/test-daily/
  publicPath: process.env.NODE_ENV == 'development' ? './' : '/test-daily/',  
  ...... 
}

Conforme mostrado na figura abaixo:

Até agora, o trabalho de configuração do front-end está concluído.

2.2. Configuração do servidor (tome o nginx como exemplo aqui)

O site oficial na verdade tem uma introdução, mas não é muito detalhada. Aqui está o código diretamente, da seguinte forma:

location /test-daily indica que o projeto está implantado no diretório /test-daily, que deve ser consistente com o valor de publicpath em vue.config.js.

A razão pela qual a página é atualizada com uma tela branca é, na verdade, porque o recurso de roteamento não existe. Tome este projeto como exemplo (home é o parâmetro do roteamento da página inicial):

https://test.xxx.yy/test-daily/home

Ao acessar a rota acima, na verdade, não há nenhum recurso correspondente, é claro que será 404. Para evitar essa situação, você pode fazer todas as rotas apontarem para index.html para resolver o problema

Configure-o no nginx: try_files $uri $uri/ /test-daily/index.html serve.

Até agora, todas as configurações do modo histórico foram realizadas.

modo: o papel da "história"

Se mode: "history" não for definido, o roteamento do Vue é padronizado para o modo hash, que é exibido na barra de endereço da seguinte forma: hash: O símbolo "#" é exibido na barra de endereço

(o hash aqui não é uma operação de hash em criptografia). Por exemplo: localhost:8080/#/index, o valor do hash é #/index. Sua característica é que, embora o hash apareça no caminho, ele não será incluído na solicitação HTTP e não terá nenhum efeito no back-end, portanto, alterar o hash não recarregará a página.

O histórico utiliza os novos métodos pushState() e replaceState() na interface de histórico do H5. (É necessário suporte específico do navegador) Esses dois métodos são aplicados à pilha de histórico do navegador. Com base no retrocesso, avanço e avanço existentes, eles fornecem a função de modificar o histórico. Só que quando eles realizam modificações, embora o URL atual seja alterado, o navegador não envia imediatamente uma solicitação ao back-end.

Resumindo: tanto o modo hash quanto o modo histórico pertencem às próprias características do navegador, e o Vue-Router apenas usa essas duas características (chamando a interface fornecida pelo navegador) para implementar o roteamento front-end.

Para tornar o caminho mais intuitivo e bonito, você precisa usar o modo histórico. Basta adicionar mode: "history" a index.js na pasta do roteador

Para saltos interativos de página única, você só precisa usar o método fornecido pelo roteador.

Vincule o roteador ao global na configuração do arquivo main.js

Vue.prototype.router = roteador;
A página de salto é a seguinte:

<button @click="toArticle()">跳转文章页面</button>
methods:{
    
    
    toArticle() {
    
    
        this.$router.push('/article')
    }
  }

O acima é uma experiência pessoal, espero que possa lhe dar uma referência!