Bu kadar çok eve baktığımda başım dönüyor ve eve nereye gideceğimi bilmiyorum. . . . . .
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.
Ş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üleGitHub'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ırArdı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ırYukarıdaki 6 adımın tek sayfalık bir uygulama oluşturmanın temel adımları olduğu söylenebilir:
JavaScript
HTML
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:
İç 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:
Ş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üleNot: 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.
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ülev-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:
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:
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:
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üleYukarıdaki ekranda iki sorun var:
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üleYö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, 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:
Bileşen kanca işlevi
Toplam 6 bileşen kanca işlevi vardır:
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:
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:
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:
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.