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:

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

6931

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.