Dois modos de trabalho do VueRouter

1. Para um URL, qual é o valor do hash? —— # e o conteúdo depois dele é
um exemplo de valor de hash:
http://localhost:5005/#/casa/mensagem

2. O valor do hash não será incluído na requisição HTTP, ou seja: o valor do hash não será levado ao servidor.

① Exemplo de implantação em modo hash:

A atualização ou reentrada não afeta a página após atingir qualquer caminho de roteamento.

② Exemplo de implantação do modo Histroy:

decerquilhamodo alterado parahistóriamodelo

em src/router/index.js

const router = new VueRouter({
    
    
// 把模式改成 'history' 重新运行打包即可
  mode: 'history',
  routes: [...]
})

Reimplante para o servidor.

Isso acontece porque no modo histórico, os seguintes caminhos serão usados ​​como recursos para solicitar ao servidor, e o servidor reportará um erro 404 se não o fizer.

Resolver esse problema requer ajuda de pessoas de back-end. Aqui está uma das várias soluções:

• conectar-história-api-fallback

• Pesquise por connect-history-api-fallback no NPM

• Instale o seguinte comando no servidor

cnpm install --save connect-history-api-fallback

• Introduza o seguinte código no nó

const history = require('connect-history-api-fallback');

// 必须在引入静态资源之前使用history
app.use(history())

• reimplantar executar

• modo hash:

  • 1. Sempre tem um # no endereço, o que não é bonito.
  • 2. Se o endereço for compartilhado por meio de um aplicativo móvel de terceiros no futuro, se o aplicativo verificar estritamente, o endereço será marcado como ilegal.
  • 3. Boa compatibilidade.

• modo de história:

  • 1. O endereço é limpo e bonito.
  • 2. Em comparação com o modo hash, a compatibilidade é um pouco pior.
  • 3. Quando o aplicativo é implantado e iniciado, ele precisa do suporte da equipe de back-end para resolver o problema de atualizar o servidor de página 404.

O código completo do exemplo neste artigo: Gitee:[email protected]:hebe0330/vue_route_guards.git