vue-vue-router Hızlı bir şekilde anlayın, sağlam bir temele sahip olmak için daha fazlasını görün

Bu kadar çok eve baktığımda başım dönüyor ve eve nereye gideceğimi bilmiyorum. . . . . .

Genel Bakış

Vue-router, Vue.js'nin resmi yönlendirme eklentisidir. Vue.js ile derinlemesine entegredir ve tek sayfalı uygulamalar oluşturmak için uygundur. Vue'nun tek sayfalı uygulaması, yönlendirme ve bileşenlere dayanır Yönlendirme, erişim yollarını ayarlamak ve yol ve bileşenleri eşlemek için kullanılır. Geleneksel sayfa uygulamaları, sayfaları değiştirmek ve atlamak için bazı köprüler kullanır. Vue yönlendirici tek sayfalık uygulamada, yollar arasında geçiş, yani bileşenlerin değiştirilmesidir.

İlk tek sayfalık uygulama (01)

Şimdi vue-yönlendirici yolculuğuna basit bir tek sayfalık uygulama ile başlıyoruz.Bu tek sayfalık uygulamanın iki yolu vardır: / home ve / about Bu iki yola karşılık gelen iki bileşendir Home ve About.

1. Bileşenler oluşturun

Önce vue.js ve vue-router.js'yi tanıtın:

< script src = "js / vue.js" > < /senaryo > < script src = "js / vue-router.js" > < /senaryo >

Ardından, Ana Sayfa ve Hakkında olmak üzere iki bileşenli kurucu oluşturun:

var Home = Vue.extend ({ şablon: ' < div > < h1 > Ev < / h1 > < p > {{msg}} < / p > < / div > ', veri: işlev () { dönüş { msg: 'Merhaba, vue yönlendirici!' } } }) var About = Vue.extend ({ şablon: ' < div > < h1 > hakkında < / h1 > < p > Bu, vue-yönlendirici ile ilgili öğreticidir. < / p > < / div > ' })

2. Yönlendirici Oluşturun

var yönlendirici = new VueRouter ()

Bir yönlendirici örnek yönlendiricisi oluşturmak için yapıcı VueRouter'ı çağırın.

3. Harita yönlendirme

router.map ({ '/ home': {bileşen: Ana Sayfa}, "/ about": {bileşen: Hakkında} })

Rotaları eşlemek için yönlendiricinin harita yöntemini çağırın. Her yol, anahtarın bir yol ve değerin bir bileşen olduğu anahtar-değer biçiminde bulunur.

Örneğin: '/ home', yolu temsil eden bir rotanın anahtarıdır; {component: Home}, rota tarafından haritalanan bileşeni temsil eder.

4. v-link komutunu kullanın

< div class = "list-group" > < a class = "list-group-item" v-link = "{yol: '/ home'}" > Ev < / a > < a class = "list-group-item" v-link = "{yol: '/ hakkında'}" > hakkında < / a > < / div >

Belirtilen yola atlamak için a elemanı üzerindeki v-link talimatını kullanın.

5. Kullanım < yönlendirici görünümü > etiket

< yönlendirici görünümü > < / yönlendirici görünümü >

Sayfada kullanın < yönlendirici görünümü > < / yönlendirici görünümü > Eşleşen bileşenleri işlemek için kullanılan etiket.

6. Yönlendirmeyi başlatın

var App = Vue.extend ({}) router.start (Uygulama, "# uygulama")

Yönlendiricinin çalışması bir kök bileşen gerektirir. Router.start (App, '# app'), yönlendiricinin bir Uygulama örneği oluşturacağı ve bunu #app öğesine bağlayacağı anlamına gelir.

Not: Vue-router kullanan uygulamaların açıkça bir Vue örneği oluşturması gerekmez, ancak kök bileşeni bir öğeye bağlamak için başlangıç yöntemini çağırır.

Demoyu Görüntüle

GitHub'dan en son kaynak kodunu aldıktan sonra, imparator sürümünü çalıştırmak istiyorsanız örnek olarak demo01'i alın, Git Bash altında aşağıdaki komutu yürütün:

npm demo01-dev çalıştır

Ardından tarayıcıda adresini ziyaret edin

Derlemek ve yayınlamak istiyorsanız, Git Bash altında aşağıdaki komutları yürütün:

npm demo01-build çalıştır

Tek bir sayfa yazma adımları

Yukarıdaki 6 adımın tek sayfalık bir uygulama oluşturmanın temel adımları olduğu söylenebilir:

JavaScript

  • Bileşenler oluşturun: tek sayfalı bir uygulamada oluşturulması gereken bileşenler oluşturun
  • Bir rota oluşturun: bir VueRouter örneği oluşturun
  • Harita yönlendirme: VueRouter örneğinin eşleme yöntemini çağırın
  • Yönlendirmeyi başlat: VueRouter örneğinin başlangıç yöntemini çağırın
  • HTML

  • V-link komutunu kullanın
  • kullanım < yönlendirici görünümü > etiket
  • router.redirect

    Uygulama ilk çalıştırıldığında, sağ taraf boştur ve uygulamanın genellikle Giriş sayfası gibi bir giriş sayfası vardır.

    Kök yolunu / home yoluna yeniden yönlendirmek için router.redirect yöntemini kullanın:

    router.redirect ({ '/':'/ev' })

    Router.redirect yöntemi, yönlendirici için genel yeniden yönlendirme kurallarını tanımlamak için kullanılır ve genel yeniden yönlendirme, geçerli yol eşleştirilmeden önce yürütülür.

    Uygulama süreci

    Kullanıcı v-link talimat öğesini tıkladığında, ortada ne olduğunu kabaca tahmin edebiliriz:

    • vue-router önce v-link talimatının yol haritasını bulacaktır
    • Ardından rota haritasına göre eşleşen bileşeni bulun
    • Sonunda bileşeni şu şekilde işleyin: < yönlendirici görünümü > etiket

    İç içe yönlendirme (02)

    İç içe yönlendirme yaygın bir gereksinimdir.Kullanıcıların / home / news ve / home / message yollarından bazı içeriğe erişebileceklerini varsayarsak, bir yol bir bileşeni eşler ve bu iki yola erişmek de iki bileşeni ayrı ayrı işleyecektir.

    İç içe yönlendirmeyi uygulamak için iki ana nokta vardır:

    • Bileşenlerin içinde kullanın < yönlendirici görünümü > etiket
    • Yönlendirici nesnesindeki bileşenler için alt yolları tanımlayın

    Şimdi bu gereksinimi gerçekleştirmeye başlayacağız.

    Bileşen şablonu:

    < şablon id = "ev" > < div > < h1 > Ev < / h1 > < p > {{msg}} < / p > < / div > < div > < ul class = "nav nav-tabs" > < li > < a v-link = "{yol: '/ ana sayfa / haberler'}" > Haberler < / a > < / li > < li > < a v-link = "{yol: '/ ev / mesaj'}" > Mesajlar < / a > < / li > < / ul > < yönlendirici görünümü > < / yönlendirici görünümü > < / div > < / şablon > < şablon id = "haberler" > < ul > < li > Haber 01 < / li > < li > Haber 02 < / li > < li > Haber 03 < / li > < / ul > < / şablon > < şablon id = "mesaj" > < ul > < li > Message 01 < / li > < li > Message 02 < / li > < li > Message 03 < / li > < / ul > < / şablon >

    Bileşen yapıcısı:

    var Home = Vue.extend ({ şablon: '# ev', veri: işlev () { dönüş { msg: 'Merhaba, vue yönlendirici!' } } }) var News = Vue.extend ({ şablon: '# haber' }) var Message = Vue.extend ({ şablon: '# mesaj' })

    Yol haritası:

    router.map ({ '/ev': { bileşen: Ev, // Alt yolu tanımlayın subRoutes: { '/Haberler': { bileşen: Haberler }, '/İleti': { bileşen: Mesaj } } }, '/hakkında': { bileşen: Hakkında } })

    / Home rotası altında bir subRoutes seçeneği tanımlanmıştır. / News ve / message, sırasıyla / home / news ve / home / message yollarını temsil eden iki alt rotadır ve bu iki rota sırasıyla News ve Message bileşenlerini eşler.

    Örnek şu şekilde çalışır:

    Demoyu Görüntüle

    Not: Burada ayırt edilmesi gereken bir kavram vardır, / home / news ve / home / message, / home rotasının alt rotalarıdır ve karşılık gelen News ve Message bileşenleri Home'un alt bileşenleri değildir.

    Adlandırılmış yol (03)

    Bazı durumlarda, bir yola bir ad eklemek, özellikle yol uzun olduğunda, yola atlamamızı kolaylaştırabilir.

    / Home / news / detail yoluna erişirken işlenen başka bir NewsDetail bileşeni ekliyoruz. Bileşen şablonu:

    < şablon id = "haberDetay" > < div > Haber Detayı - {{$ route.params.id}} ...... < / div > < / şablon >

    Bileşen yapıcısı:

    var NewsDetail = Vue.extend ({ şablon: '# newsDetail' })

    Adlandırılmış yol haritası

    router.map ({ '/ev': { bileşen: Ev, subRoutes: { '/Haberler': { isim: 'haberler', bileşen: Haberler, subRoutes: { "detail /: id": { isim: 'detay', bileşen: NewsDetail } } }, '/İleti': { bileşen: Mesaj } } }, '/hakkında': { bileşen: Hakkında } })

    Not: / Homes / news / ve home / news / detail /: id rotalarını tanımladığımızda, rotanın name niteliğini belirledik.

    /: id bir yönlendirme parametresidir. Örneğin, Haber detaylarını id = '01' ile görüntülemek isterseniz, erişim yolu / home / news / detail / 01 olur.

    Ana sayfa bileşeni ve Haber bileşeni şablonu:

    < şablon id = "ev" > < div > < h1 > Ev < / h1 > < p > {{msg}} < / p > < / div > < div > < ul class = "nav nav-tabs" > < li > < a v-link = "{isim: 'haberler'}" > Haberler < / a > < / li > < li > < a v-link = "{yol: '/ ev / mesaj'}" > Mesajlar < / a > < / li > < / ul > < yönlendirici görünümü > < / yönlendirici görünümü > < / div > < / şablon > < şablon id = "haberler" > < div > < ul > < li > < a v-link = "{isim: 'detay', parametreler: {id: '01'}}" > Haber 01 < / a > < / li > < li > < a v-link = "{yol: '/ ana sayfa / haberler / ayrıntı / 02'}" > Haber 02 < / a > < / li > < li > < a v-link = "{yol: '/ ana sayfa / haberler / ayrıntı / 03'}" > Haber 03 < / a > < / li > < / ul > < div > < yönlendirici görünümü > < / yönlendirici görünümü > < / div > < / div > < / şablon >

    < a v-link = "{isim: 'haberler'}" > Haberler < / a > ile < a v-link = "{isim: 'detay', parametreler: {id: '01'}}" > Haber 01 < / a > Bu iki HTML kodu satırı, adlandırılmış bir yol kullanır.

    Örnek şu şekilde çalışır:

    Demoyu Görüntüle

    v-link komutu

    Bu kadar uzun süre sonra v-link komutunu tanıtmanın zamanı geldi.

    v-link, kullanıcıların vue-yönlendirici uygulamasında farklı yollar arasında geçiş yapmasına izin veren bir talimattır. Bu talimat bir JavaScript ifadesini kabul eder ve kullanıcı öğeyi tıkladığında router.go'yu çağırmak için ifadenin değerini kullanır.

    Özellikle, v-link'in üç kullanımı vardır:

    < ! - değişmez yol - > < a v-link = "'ev'" > Ev < / a > < ! - Yukarıdaki ile aynı etki - > < a v-link = "{yol: 'ev'}" > Ev < / a > < ! - Adlandırılmış yol - > < a v-link = "{isim: 'detay', parametreler: {id: '01'}}" > Ev < / a >

    v-link otomatik olarak ayarlanacak < a > Href özelliği, aşağıdaki nedenlerle tarayıcı ayarlamalarını işlemek için href kullanmanız gerekmez:

    • HTML5 geçmiş modu ve karma modda aynı şekilde çalışır, bu nedenle modu değiştirmeye karar verirseniz veya IE9 tarayıcısı karma moda dönüşürse, herhangi bir değişiklik yapmanız gerekmez.
    • HTML5 geçmiş modunda, v-link, tarayıcının sayfayı yeniden yüklemeyi denemesini önlemek için tıklama olaylarını izler.
    • Kök seçeneğini HTML5 geçmiş modunda kullanırken, v-link URL'sine kök yolunu eklemenize gerek yoktur.

    Rota Nesnesi (04)

    Vue-yönlendirici kullanan uygulamalarda, yönlendirme nesnesi her bileşene enjekte edilecek, bu değer atanacaktır. $ Route ve yönlendirme nesnesi, yol değiştirildiğinde güncellenecektir.

    Yönlendirme nesnesi aşağıdaki öznitelikleri ortaya çıkarır:

    • $ route.path
    • Geçerli yönlendirme nesnesinin yoluna eşit bir dize, "/ home / news" gibi mutlak bir yol olarak çözümlenecektir.
    • $ route.params
    • Rotadaki dinamik parçaların ve tam eşleme parçalarının anahtar / değer çiftlerini içeren nesne
    • $ route.query
    • Yolda sorgu parametrelerinin anahtar / değer çiftlerini içeren nesne. Örneğin, / home / news / detail / 01? Favourite = yes için $ route.query.favorite == 'yes' alacaksınız.
    • $ route.router
    • Yönlendirme kuralının ait olduğu yönlendirici (ve ait olduğu bileşenler).
    • $ route.matched
    • Halihazırda eşleşen yolda bulunan tüm parçalara karşılık gelen konfigürasyon parametresi nesnelerini içeren bir dizi.
    • $ route.name
    • Geçerli yolun adı. Adlandırılmış yol kullanılmıyorsa, ad boştur.

    Bu yönlendirme nesnelerinin niteliklerini görüntülemek için sayfaya aşağıdaki kodu ekleyin:

    < div > < p > Mevcut yol: {{$ route.path}} < / p > < p > Mevcut parametreler: {{$ route.params | json}} < / p > < p > Rota adı: {{$ route.name}} < / p > < p > Yönlendirme sorgu parametreleri: {{$ route.query | json}} < / p > < p > Eşleşen öğeleri yönlendir: {{$ route.matched | json}} < / p > < / div >

    $ Route.path, $ route.params, $ route.name, $ route.query özelliklerinin anlaşılması kolaydır ve örneklere bakarak anlamlarını görebilirsiniz.

    ($ Route.matched öğesinin uzun içeriği nedeniyle ekranda görüntülenmiyor)

    Burada, kapsayıcı bir eşleşme olan ve onu iç içe geçiren tüm ana yollarla eşleşen $ router.matched özniteliğinden biraz bahsetmek istiyorum.

    Örneğin, / ev / haberler / ayrıntı /: id yolu, 3 eşleşen yol içerir:

  • / ana sayfa / haberler / detay /: kimlik
  • / ana sayfa / haberler
  • /ev
  • Ek olarak, v-link yönergesine sahip bir eleman için, v-link'e karşılık gelen URL geçerli yolla eşleşirse, eleman belirli bir sınıfla eklenir ve sınıfın varsayılan adı v-link-active olur. Örneğin, URL / ana sayfa / haberler / detay / 03'ü ziyaret ettiğimizde, eşleştirme kurallarına göre 3 bağlantı v-link-active eklenecektir.

    Demoyu Görüntüle

    Bağlantıyı aktif tutun (05)

    Yukarıdaki ekranda iki sorun var:

  • Kullanıcı Ana Sayfa bağlantısını veya Hakkında bağlantısını tıkladığında, bağlantı seçili olarak görüntülenmez
  • Kullanıcı Haber veya Mesaj bağlantısını tıkladığında, bağlantı seçili olarak görüntülenmiyor
  • ActiveClass'ı ayarlayın

    İlk sorun, v-link komutunun activeClass'ı ayarlanarak çözülebilir.

    < a class = "list-group-item" v-link = "{yol: '/ home', activeClass: 'active'}" > Ev < / a > < a class = "list-group-item" v-link = "{yol: '/ about', activeClass: 'active'}" > hakkında < / a >

    V-link komutunun activeClass özniteliğini ayarladıktan sonra, varsayılan v-link-active yeni sınıfla değiştirilir.

    İkinci soru, önyükleme stilini kullandığımız ve bir etiketin üst öğesini ayarlamamız gerektiğinden, v-link yönergesi için activeClass'ın ayarlanmasının işe yaramayacağıdır. < li > Aşağıdaki kodda gösterildiği gibi, bağlantının seçili görünmesini sağlamak için:

    < ul class = "nav nav-tabs" > < li class = "aktif" > < a v-link = "{yol: '/ ana sayfa / haberler'}" > Haberler < / a > < / li > < li > < a v-link = "{yol: '/ ev / mesaj'}" > Mesajlar < / a > < / li > < / ul >

    Bu etkiye nasıl ulaşılır? Home bileşeninin data seçeneğine bir currentPath özniteliği eklemeyi ve ardından sınıfı aşağıdaki şekilde bağlamayı düşünebilirsiniz.

    < ul class = "nav nav-tabs" > < li: class = "currentPath == '/ home / news'? 'active': ''" > < a v-link = "{yol: '/ ana sayfa / haberler'}" > Haberler < / a > < / li > < li: class = "currentPath == '/ home / message'? 'active': ''" > < a v-link = "{yol: '/ ev / mesaj'}" > Mesajlar < / a > < / li > < / ul >

    Şimdi başka bir soru ortaya çıkıyor, hangi koşullar altında currentPath atanmalı?

    Kullanıcı v-link elemanına tıkladığında rota değişir.

    Her bileşenin bir rota seçeneği vardır ve rota seçeneği, rotalar arasında geçiş yapılırken yürütülecek bir dizi kanca işlevine sahiptir.

    Kanca işlevlerinden biri, bileşen verilerini yüklemek ve ayarlamak için kullanılan veri kancası işlevidir.

    var Home = Vue.extend ({ şablon: '# ev', veri: işlev () { dönüş { msg: 'Merhaba, vue yönlendirici!', şuanki yol:'' } }, rota: { data: function (geçiş) { geçiş.next ({ currentPath: transition.to.path }) } } })

    Bu örneğin akıcı etkisi aşağıdaki gibidir:

    Demoyu Görüntüle

    Kanca işlevi (06)

    Yönlendirme anahtarlama işlemi, esas olarak bir dizi yönlendirme kancası işlevini yürütür. Kanca işlevleri genellikle iki kategoriye ayrılır:

    • Global kanca işlevi
    • Bileşen kanca işlevi

    Global kanca işlevi, genel yönlendirme nesnesinde tanımlanır ve bileşenin kanca işlevi, bileşenin yönlendirme seçeneğinde tanımlanır.

    Global kanca işlevi

    2 global kanca işlevi vardır:

    • beforeEach: rota geçişinin başlangıcında çağrılır
    • afterEach: her rota geçişinde Aktivasyon aşamasına başarıyla girildi Ne zaman denir

    Bileşen kanca işlevi

    Toplam 6 bileşen kanca işlevi vardır:

    • data: Bileşenin verilerini ayarlayabilirsiniz.
    • etkinleştir: bileşeni etkinleştir
    • deactivate: bileşeni devre dışı bırakın
    • canActivate: bileşenin etkinleştirilip etkinleştirilemeyeceği
    • canDeactivate: bileşenin devre dışı bırakılıp bırakılamayacağı
    • canReuse: bileşenin yeniden kullanılıp kullanılamayacağı

    Nesne değiştir

    Her anahtar kancası işlevi, bir geçiş nesnesini bir parametre olarak kabul eder. Bu anahtar nesnesi aşağıdaki işlevleri ve yöntemleri içerir:

    • geçis
    • Geçiş yapılacak yolun yönlendirme nesnesini temsil eder.
    • geçiş.
    • Geçerli yolu temsil eden yönlendirme nesnesi.
    • geçiş.next ()
    • Anahtarlama işleminin bir sonraki adımını işlemek için bu işlevi çağırın.
    • geçiş.abort ()
    • Anahtarı sonlandırmak veya reddetmek için bu işlevi çağırın.
    • geçiş.redirect (yol)
    • Geçerli anahtarı iptal edin ve başka bir rotaya yönlendirin.

    Kanca işlevlerinin yürütme sırası

    Toplamda 8 global kanca işlevi ve bileşen kanca işlevi vardır.Vue yönlendiricinin kullanımına aşina olmak için, bu kanca işlevlerinin yürütme sırasını anlamak gerekir.

    Bu kanca işlevlerinin yürütme sırasını sezgisel olarak anlamak için ekrana bir Vue örneği ekleyin:

    var well = new Vue ({ el: "iyi", veri: { msg: '', renk: '# ff0000' }, yöntemler: { setColor: function () { this.color = '#' + parseInt (Math.random () * 256) .toString (16) + parseInt (Math.random () * 256) .toString (16) + parseInt (Math.random () * 256) .toString (16) }, setColoredMessage: function (msg) { this.msg + = ' < p style = "renk: '+ this.color +'" > '+ msg +' < / p > ' }, setTitle: function (title) { this.msg = ' < h2 style = "renk: # 333" > "+ başlık +" < / h2 > ' } } })

    Kuyu örneğinin HTML'si:

    < div class = "iyi" > {{{msg}}} < / div >

    Ardından, her hook işlevinin yürütme günlüğünü kaydetmek için bir RouteHelper işlevi ekleyin:

    function RouteHelper (ad) { var route = { canReuse: function (geçiş) { well.setColoredMessage ('yürütülebilir bileşen' + ad + 'için Hook işlevi: canReuse') doğruya dön }, canActivate: function (geçiş) { well.setColoredMessage ('yürütülebilir bileşen' + ad + 'için Hook işlevi: canActivate') geçiş.next () }, enable: function (geçiş) { well.setColoredMessage ('ardışık bileşen' + ad + 'için Hook işlevi: etkinleştirin') geçiş.next () }, canDeactivate: function (transition) { well.setColoredMessage ('yürütülebilir bileşen' + ad + 'için Hook işlevi: canDeactivate') geçiş.next () }, deactivate: function (geçiş) { well.setColoredMessage ('ardışık bileşen' + ad + 'için Hook işlevi: devre dışı bırak') geçiş.next () }, data: function (geçiş) { well.setColoredMessage ('yürütülebilir bileşen' + ad + ': veri' için Hook işlevi) geçiş.next () } } dönüş yolu; }

    Son olarak, bu kanca işlevlerini her bileşene uygulayın:

    var Home = Vue.extend ({ şablon: '# ev', veri: işlev () { dönüş { msg: 'Merhaba, vue yönlendirici!', yol: '' } }, rota: RouteHelper ('Ana Sayfa') }) var News = Vue.extend ({ şablon: '# haber', rota: RouteHelper ('Haberler') }) var Message = Vue.extend ({ şablon: '# mesaj', route: RouteHelper ('Mesaj') }) var About = Vue.extend ({ şablon: '# hakkında', route: RouteHelper ('Hakkında') })

    Aşağıdaki adımlara göre küçük bir deney yapalım:

  • Uygulamayı çalıştırın (erişim / ev yolu)
  • Erişim / ev / haber yolu
  • Erişim / ev / mesaj yolu
  • Erişim / yol hakkında
  • Demoyu Görüntüle

    Anahtar kontrol boru hattı

    Kullanıcı / home / news bağlantısını ve ardından / home / message bağlantısını tıkladığında, vue-router ne yapar? Anahtarlama hattını yürütür

    Bu nasıl yapılır? Bu süreç, yapmamız gereken bazı işleri içerir:

  • Home bileşeni yeniden oluşturulduktan sonra değişmeden kaldığı için Home bileşeni yeniden kullanılabilir.
  • Haber bileşenini devre dışı bırakmanız ve kaldırmanız gerekir.
  • Bileşen Mesajı'nı etkinleştirin ve etkinleştirin.
  • 2. ve 3. adımları gerçekleştirmeden önce, anahtarlama etkisinin etkili olduğundan, yani anahtarlamayla ilgili tüm bileşenlerin beklendiği gibi devre dışı bırakılabildiğinden / etkinleştirilebildiğinden emin olmanız gerekir.
  • Anahtarlama aşamaları

    Yönlendirme anahtarını üç aşamaya ayırabiliriz: yeniden kullanılabilir aşama, doğrulama aşaması ve etkinleştirme aşaması.

    Her aşamayı açıklamak için örnek olarak evden / haberlerden eve / mesaja geçişi alıyoruz.

    (Aşağıdaki metin açıklaması referansı:

    1. Yeniden kullanılabilir aşama

    Mevcut görünüm yapısında yeniden kullanılabilir bileşenler olup olmadığını kontrol edin. Bu, iki yeni bileşen ağacını karşılaştırarak, ortak bileşenleri bularak ve ardından yeniden kullanılabilirliklerini kontrol ederek (canReuse seçeneği aracılığıyla) yapılır. Varsayılan olarak, tüm bileşenler özelleştirilmedikçe yeniden kullanılabilir.

    2. Doğrulama aşaması

    Mevcut bileşenin devre dışı bırakılıp bırakılamayacağını ve yeni bileşenin etkinleştirilip etkinleştirilemeyeceğini kontrol edin. Bu, yönlendirme yapılandırma aşamasında canDeactivate ve canActivate hook işlevlerinin çağrılmasıyla belirlenir.

    3. Aktivasyon aşaması

    Tüm doğrulama kancası işlevleri çağrıldığında ve anahtar sonlandırılmadığında, anahtar yasal kabul edilebilir. Yönlendirici, mevcut bileşeni devre dışı bırakmaya ve yeni bileşeni etkinleştirmeye başlar.

    Bu aşamada karşılık gelen kanca işlevinin çağırma sırası, doğrulama aşamasınınki ile aynıdır ve amacı, bileşen anahtarı fiilen çalıştırılmadan önce temizleme ve hazırlık fırsatı sağlamaktır. Arayüz güncellemesi, etkilenen tüm bileşenlerin devre dışı bırakma ve etkinleştirme kanca işlevlerinin yürütülmesini bekleyecektir.

    Veri kancası işlevi etkinleştirildikten sonra veya mevcut bileşen yeniden kullanılabildiğinde çağrılacaktır.

    Yine hafife mi aldın? İki boyutlu malzemelerin havacılık alanında da büyük uygulamaları var!
    önceki
    Prenses Megan sonunda artık düşük anahtar değil, kırmızı ceket ve mor etek çok göz kamaştırıcı, ancak dağınık saç modeli puanları azaltıyor
    Sonraki
    RNG iki tur diz çökmüştü ve RW tarafından mühürlendi. Casa bir hata yaptı ve Dalong soyuldu! Netizen: RNG çok fazla hata yaptı!
    "TWICE" "Paylaş" 190205 Idol Games Kadın Okçuluk Programı Yayını TWICE başarıyla finallere girdi!
    Zhang Han, Chen Xiao, Marco, Xianzi, Bayrak Kız, Pa Ye haberi verdi
    Kuantum durum ile klasik durum arasındaki gaz değiştirme davranışının sırrı nedir?
    Qin Hailunun iyi mizacına hayran kalmış, altın saçaklı etekli küçük bir periye benziyor, gelişmiş ve zarif
    AJ'nin hatası, RNG'nin ilk oyunda kaybetmesine neden oldu ve RW Zhang Wuji yenilmez moduna başladı! Netizen: AJ Bobby çekildi
    Harika: Nanokristal "fabrikası" kuantum noktalarının üretimini tamamen değiştirecek!
    47 yaşındaki Anita Yuen yeni bir saç stiline sahip, kazak giyiyor ve kot etek çok genç ve yüksek at kuyruğu giymek daha kız gibi.
    Bu dört takımda MSI yerlerinin oluşma ihtimali yüksek, RNG lider, EDG soğuk!
    190205 Liu Yuning ve Wang Peiyu, Çin Yeni Yılını karşılamak için güçlü bir Çin stiliyle "Sıradışı Karakterler" şarkısını söylediler
    Han Geng bir şeyler çalıp sınıf arkadaşlarını idrar içmeleri için aldatarak kendini havaya uçurdu, ama sadece kara tarihi değil
    Güney Kore İnternet kafe oyun sıralamaları açıklandı, LOL dirildi mi? Profesyonel lig, LOL'ye en fazla katkıyı sağlar!
    To Top