Was ist der HTML5-Verlaufsmodus?

Vue-Router-Standard-Hash-Modus – verwendet den Hash der URL, um eine vollständige URL zu simulieren, sodass die Seite nicht neu geladen wird, wenn sich die URL ändert.

Wenn wir keinen hässlichen Hash wollen, können wir den Routing-History-Modus verwenden, der die API „history.pushState“ vollständig nutzt, um URL-Sprünge durchzuführen, ohne die Seite neu zu laden.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

Wenn Sie den Verlaufsmodus verwenden, ist die URL genau wie eine normale URL, z. B. http://yoursite.com/user/id, was auch gut aussieht!

Um diesen Modus jedoch gut spielen zu können, benötigen Sie auch Unterstützung für die Hintergrundkonfiguration. Da es sich bei unserer Anwendung um eine Single-Page-Client-Anwendung handelt, wird 404 zurückgegeben, wenn der Hintergrund nicht korrekt konfiguriert ist und der Benutzer im Browser direkt auf http://oursite.com/user/id zugreift .

Sie müssen also auf der Serverseite eine Kandidatenressource hinzufügen, die alle Situationen abdeckt: Wenn die URL mit keiner statischen Ressource übereinstimmt, sollte sie dieselbe index.html-Seite zurückgeben, also die Seite Ihrer App hängt davon ab.

Backend-Konfigurationsbeispiel

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f  RewriteCond %{REQUEST_FILENAME} !-d  RewriteRule . /index.html [L]</IfModule>

nginx

location / {
  try_files $uri $uri/ /index.html;
}

Node.js (Express)

https://github.com/bripkens / connect-history-api-fallback
Warnung
Geben Sie mir eine Warnung, da Ihr Server danach keine 404-Fehlerseite mehr zurückgibt, da die Datei index.html für alle Pfade zurückgegeben wird. Um dies zu vermeiden, sollten Sie alle Routing-Situationen in Ihrer Vue-Anwendung abdecken und anschließend eine 404-Seite präsentieren.

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

Oder, wenn Sie Node.js als Backend verwenden, können Sie serverseitiges Routing verwenden, um die URL abzugleichen, und 404 zurückgeben, wenn keine Route übereinstimmt, und so einen Fallback implementieren.

Das obige ist der detaillierte Inhalt vonWas ist der HTML5-Verlaufsmodus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!