Mithril.js Routing(Yönlendirme)

Yönlendirme sadece bir Web sayfadan diğer Web sayfasına geçmek anlamına gelir. Tıklama butonumuzdan önce görünen bir açılış sayfası ekleyelim. İlk önce bunun için bir bileşen oluşturuyoruz:

var Test = {
    view: function() {
        return m("a", {href: "#!/hello"}, "Enter!")
    }
}

Gördüğünüz gibi, bu bileşen kısaca bir #!/hello link oluşturur, #! Kısmı hashbang olarak bilinir ve bundan sonraki öğelerin (/hello bölümü) bir rota yolu olduğunu belirtmek için Tek Sayfa Uygulamalarında kullanılan genel bir kuraldır.

Diğer Hello bileşenide oluşturalım.

var Test = {
    view: function() {
        return m("a", {href: "#!/hello"}, "Enter!")
    }
}
var Hello = {
    view: function() {
        return m("h1", "merhaba")
    }
}

Şimdi birden fazla ekrana sahip olmak için, m.mount methodu yerine m.route kullanıyoruz.

var root = document.body;

var Test = {
    view: function() {
        return m("a", {href: "#!/hello"}, "Enter!")
    }
}
var Hello = {
    view: function() {
        return m("h1", "merhaba")
    }
}
m.route(root, "/test", {
    "/test": Test,
    "/hello": Hello,
})

ÇIKTI:

m.route methodu hala m.mount ile aynı otomatik yeniden çizme işlevselliğine sahiptir ve ayrıca URL farkındalığı sağlar; Başka bir deyişle, Mithril'in ne zaman ne yapacağını bilmesini sağlar.

Root'dan hemen sonraki "/test", varsayılan yoldur, yani, URL’deki hashbang tanımlanmış rotalardan birini göstermiyorsa (/test ve /hello), Mithril varsayılan rotaya yönlendirir. Yani, sayfayı bir tarayıcıda açarsanız ve URL’niz https://localhost ise, https://localhost/#!/test 'a yönlendirilirsiniz.

Ayrıca, beklediğiniz gibi, açılış sayfasındaki bağlantıya tıklamak sizi daha önce oluşturduğumuz tıklama butonu ekranına götürür. Artık URL’nizin göstereceğine dikkat edin. https://localhost/#!/hello Tarayıcının geri ve sonraki düğmesini kullanarak açılış sayfasına ileri geri gidebilirsiniz.

m.route.Link

Bu kod bileşende dinamik bir yönlendirilebilir bağlantı oluşturabilir:

m(m.route.Link, {href: "/test"},"Home")

m.route.Link kullanmak, bağlantının bir yönlendirici bağlantısı gibi davranmasına neden olur. Üstüne tıklamak, geçerli sayfadan href'te belirtilen URL'ye gitmek yerine, href'te belirtilen yola gider.

Navigation Bar Yapımı

Normal olarak, rotaları haritalandırmak için birkaç bileşen oluşturmanız gerekir:

var Home = {
    view: function() {
        return [
            m(Menu),
            m("h1", "Home")
        ]
    }
}

var Page1 = {
    view: function() {
        return [
            m(Menu),
            m("h1", "Page 1")
        ]
    }
}

Yukarıdaki örnekte, iki bileşen vardır: Home Sayfası ve Page1 Her biri bir menü ve bir kısa metin içerir. Menünün kendisi, tekrarı önlemek için bir bileşen olarak tanımlanıyor:

var Menu = {
    view: function() {
        return m("nav", [
            m(m.route.Link, {href: "/"}, "Home"),
            m(m.route.Link, {href: "/page1"}, "Page 1"),
        ])
    }
}

Artık rotaları tanımlayabilir ve bileşenlerimizi onlara göre haritalandırabiliriz:

m.route(document.body, "/", {
    "/": Home,
    "/page1": Page1,
})
	

Burada iki rota belirleriz: / ve /page1, kullanıcı her bir URL'ye giderken ilgili bileşenlerini oluşturur.

ÇIKTI: