Vue.JS mit Vue Router: Hash Zeichen in URL entfernen

SPA mit Vue Router können mithilfe des History Modes komplette URLs anzeigen – diese sind allerdings lediglich simuliert. Alles nach dem Hash ist nicht Teil der URL und wird nur vom Router verwendet, um dem Benutzer den richtigen Inhalt anzuzeigen. Dies hat negative Auswirkungen auf das SEO.

Wie wir den Hash entfernen und aus unseren simulierten URLs richtige URLs machen, erfahren sie in diesem Beitrag.

Vue Router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import Home from './pages/Home.vue';
import Contact from './pages/Contact.vue';
import NotFound from './pages/NotFound.vue';

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        redirect: '/home',
    },
    {
        path: '/home',
        component: Home,
        name: 'Home',
    },
    {
        path: '/contact',
        component: Contact,
        name: 'Contact',
    },
    {
        path: '*',
        component: NotFound,
        name: '404 Page not found',
    },

]

export default new VueRouter({ mode: 'history', routes });

Was davor https://example.com/#/contact war, ist nun https://example.com/contact. Der Server, der die Applikation hostet, weiß das allerdings noch nicht. Hier müssen wir ebenfalls Änderungen vornehmen:

Apache

<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;
}

Vue Laravel

Sollte unsere Vue.JS Applikation innerhalb einer Laravel Applikation gehostet werden, können wir hier direkt in der web.php Änderungen vornehmen.

<?php

use Illuminate\Support\Facades\Route;

Route::any('{all}', function () {
    return view('app');
})->where('all', '^(?!api).*$');

„app“ muss hier natürlich mit dem Namen unserer default Blade Ansicht ausgetauscht werden. Die where-clause erlaubt uns weiterhin, die APIs durchzulassen. URLs, die diesen String beinhalten, werden nicht automatisch weitergeleitet, sondern korrekt an die API Schnittstelle weitergeleitet.

Sollten Sie noch Fragen haben oder eine Beratung wünschen, können Sie gerne mit uns Kontakt aufnehmen oder unsere Webseite besuchen.

Gerne können Sie hier auch andere Artikel zum Thema Vue.JS anschauen.