Schlagwort-Archive: Vue.JS

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.

Back Funktion in Vue mit Vue-Router abfangen

Bei der Entwicklung von Vue Webanwendungen hat man in der Regel mehrere Ansichten oder Dialoge innerhalb einer Unterseite. Bei dem Betätigen der Zurücktaste im Browser oder direkt an der Maus wird allerdings die letzte Seite in der History geöffnet. Etwaige Fortschritte gehen somit verloren.

Eine einfache Möglichkeit dieses Verhalten abzufangen sind Router Guards. Wir können hier den Seitenwechsel abfangen, abfragen ob gerade etwas aktiv ist und den Seitenwechsel erlauben oder abbrechen.

Im ersten Schritt muss in der Komponente die wir bearbeiten möchten innerhalb des created Events der Router Guard hinterlegt werden.

const unregisterRouterGuard = this.$router.beforeEach((to, from, next) => {

});

this.$once('hook:destroyed', () => {
    unregisterRouterGuard();
});

Innerhalb der Funktion können wird jetzt angeben welche v-models welches Verhalten auslösen sollten.

if (this.showData) {
    this.backFunction();
    next(false);
} else {
   next();
}

In diesem Beispiel haben wir einen modalen Dialog mit dem v-model showData. Wenn dieser auf true steht, dann ist der Dialog gerade offen. Der User möchte allerdings nicht sofort auf die vorherige Seite, sondern den Dialog schließen.

Wir führen die Funktion backFunction() aus um den Dialog zu schließen und verhindern mit next(false) die Weiterleitung.

Problematik: Der User hat einen modalen Dialog, Karte oder ähnliches geöffnet, möchte allerdings über die Navigation auf eine andere Unterseite. Bei Betätigen des router-links wird das Verlassen der Seite abgebrochen und der Dialog wird geschlossen.

Um dieses Verhalten zu Verhindern fügen wir dem mounted Event einen Event-Listener hinzu:

this.$root.$on(override, () => {
    this.routerGuardOverwrite = true;
});

Der Router Link in der Navigation bekommt ein @click, welches den Override ausführt.

<router-link to="/nextcloud" v-if="roleAttributes.includes('nextcloud')">
    <v-list-item link @click="handleLinkClick()">
        <v-list-item-action>
            <v-icon>mdi-cloud</v-icon>
        </v-list-item-action>
        <v-list-item-content>
            <v-list-item-title>
                Nextcloud
            </v-list-item-title>
        </v-list-item-content>
    </v-list-item>
</router-link>
handleLinkClick: function () {
    this.$root.$emit(override);
},

Abschließend können wir am Anfang des Router Guards das Verlassen der Seite erlauben.

if (this.routerGuardOverride) {
    next();
    return;
}

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