JS Router

hmeise · 6. April 2018

Hey.

Ich habe vor, einen Router zu programmieren, und er funktioniert - in dieser minimalen Form - auch schon. Doch wenn ich ein zweiten "Parameter" angebe ist aus:

/ -> funktioniert

/item -> funktioniert

/item/5 -> funktioniert nicht

Woran könnte das liegen? Wie gesagt, ich habe gerade erst angefangen, ist noch nicht viel Code. Ich entwickle auf einem lokalen Apache-Webserver (auf Manjaro).

Code

// index.js
'use strict';

var rootHost = window.location.hostname;
var rootProt = window.location.protocol;
var root = rootProt + '//' + rootHost + '/';

class Router {
    constructor() {
        this.url;
        this.pageUrl;
        this.start();
    }

    start() {
        let navLinks = document.getElementsByClassName('nav-link');
        for (let i = 0; i<navLinks.length; i++) {
            navLinks[i].addEventListener('click', (e) => {
                e.preventDefault();
                this.url = e.target.pathname.substr(1);
                console.log(this.url);
            })
        }
    }
}
var router = new Router();

Alles anzeigen

Apache Configuration

// .htaccess
Options +FollowSymLinks
RewriteEngine On
RewriteBase /

RewriteCond %{SCRIPT_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^.*$ ./index.html

basti1012 · 7. April 2018

kann das sein das hier

var root = rootProt + '//' + rootHost + '/';

ein / zu viel ist in der mitte ?

Ist das alles an Code? Da fehlt doch noch was oder ?

hmeise · 7. April 2018

Hey.

Ja, das hab ich auch schon entdeckt, hab aber trotzdem nicht funktioniert. Erst, nachdem ich if-Abfragen nach der URI hinzugefügt habe, hat es funktioniert:

Code

if (this.url === "") {
    var url = root + 'module/start';
} else if (this.routes[this.url]) {
    var url = root + 'module/' + this.routes[this.url].modul;    
} else {
    var url = root + 'module/fehlerseite';
}

// HTML in #inhalt laden
let contentFile = url + '/index.html';
let request = new XMLHttpRequest;
request.onreadystatechange = function() {
    let container = document.getElementById('inhalt');
    let content = request.responseText;
    container.innerHTML = content;
}
request.open('GET', contentFile, true);
request.send(null);

Alles anzeigen

Allerdings funktioniert jetzt was anderes nicht

Wenn ich das dazugehörige JavaScript nachladen möchte, wird es zwar im virtuellen DOM angezeigt, aber leider nicht ausgeführt:

Code

// Scripte laden
let container = document.body;
let scriptContainer = document.createElement('script');
scriptContainer.src = url + '/index.js';
scriptContainer.async = true;
container.appendChild(scriptContainer);

hmeise · 8. April 2018

Okay, jetzt isses soweit. Habe es gerade geschafft, dass alles funktioniert und habe auch schon die erste Seite aus der API befüllt. Jetzt zickt er wieder bei /adressbuch/bearbeiten...

Habe euch mal die ganze Geschichte hochgeladen, vielleicht findet ihr ja was.

Danke im Voraus

JS Router

Jetzt mitmachen!

Teilen