WordPress Rest Fire ile Vuejs Yönlendirici Kullanma

Son iki makalemde, Vuejs JavaScript çerçevesinin temellerini ve WordPress API REST ile nasıl kullanılacağını tartıştım. Vuej’lerin ve şablonların temellerini ve uygulama parçalarını yapmak için bileşenlerin nasıl kullanılacağını kullanarak tartıştım. Bu yazıda, bu bileşeni kullanan eyaletler arasında hareket etmek için Vue-Rower’ı nasıl kullanacağınızı göstereceğim. Vuejs resmi bir yönlendirici tarafından güçlü bir şekilde bağlı değildir ve resmi belgeler buna bir alternatif bile sağlar. Bu, vue yönlendirici, çok basit ve temiz, bu yüzden üç duruma sahip bir yönlendirici yapalım: ev, yayınlar ve yayınlar.
Bu dizideki son makalemden başlayarak, GitHub’da bulabileceğiniz Vuejs kullanarak basit bir tema yaptım. Temayı kullanmanın nedeni, WordPress midesini kullanmaktır. Ancak bu, ihtiyacımız olmadığı anlamına gelmez, bu kod isterseniz WordPress temasından alabilir. Sadelik için temanın index.php’sini kullanmaya devam edeceğim, ancak bu artık gerçekten gerekli değil. Yaptığım önemli bir değişiklik, function.php: <? Php tarafından teslim edilen komut dosyasına bir vue yönlendirici bileşeni eklemekti.
Add_action ('wp_enqueue_scripts', function () {
wp_enqueue_script ('jQuery');
wp_enqueue_script ('vue-router', get_template_directory_uri (). '/assets/js/vue-router.js', ['vuejs']);
wp_enqueue_script ('vuejs', get_template_directory_uri (). '/assets/js/vue.js');
}); Ayrıca, bir gönderi listesi oluşturmak için biri ve diğeri bir gönderiyi görüntülemek için iki bileşene ihtiyacımız olacak. İşte son makaleden ödünç alınan iki bileşen: var post = vue.component ('liste sonrası', {
Şablon: '#liste sonrası tmpl',
Veri: function () {
dönüş{
Gönderi: []
}
},
Yüklü: function () {
this.getPosts ();
},
yöntem: {
getPosts: function () {
Var self = this;
$ .get (config.api.posts, işlev (r) {
Self. $ set (self, 'post', r);
});
},
}
});
Var post = vue.component ('post', {
Şablon: '#TMPL sonrası',
Veri: function () {
dönüş{
Postalamak: []
}
},
Yüklü: function () {
this.getPost ();
},
yöntem: {
getPost: function () {
Var self = this;
$ .get (config.api.posts + 42, işlev (r) {
R.Title = R.Title.Rendered;
R.Concent = R.Conent.Rened;
Self. $ set (self, 'post', r);
});
}
}
}); "Gönderme" bileşeni şimdilik kimlik 42'ye sabit koddur. Daha sonra kimlik dinamik olacaktır – geçerli kimliği ayarlamak için yönlendirici tarafından sağlanır.
Bileşenlerimiz üzerinde çalışmadan önce Vue-Yönlendiriciyi kullanarak, sert kod şablonlu rotayı kullanarak bir yönlendirici ve navigasyon tanıtmak istiyorum, böylece nasıl çalıştığını görebilirsiniz. Bir yönlendirici örneği oluşturmak ve bir dizi seçenek ve rota sağlamak için VUE yönlendirici işlevini kullanıyoruz. Rota, başlayacağımız bir bileşen hattı veya daha sonra kullanacağımız uygulamada belirlenen bileşenler şeklinde olabilir. Yalnızca bir şablon argümanı olan bir bileşen satırıyla başlayalım: var yönlendirici = yeni vuerouter ({{
Mod: 'Tarih',
Güzergah: [
{yol: '/', şablon: '
merhaba
'},
{Path: '/Merhaba/Roy', Şablon: '
Merhaba Roy
'}, {yol: '/hi/shawn', şablon: '
]
});
Yeni Vue ({
Yönlendirici,
}.
Geçerli rota adı: {{$ route.name}}
Home
Sapa Roy
Sapa Shawn
Yönlendirici-view>
Bunu çalıştırırsanız, durum arasında üç hareketli bağlantı göreceksiniz. Ayrıca, tarayıcı adresi farklı bir URL rotasına güncellenmelidir.
Şimdi yayınlarımızı kullanmaya ve bileşenleri göndermeye başlayalım. Yeni yönlendiricimizin üç yolu olacak: ev, yayınlar ve yayınlar. Üçüncü “yazı” nın posta kimliğini temsil etmek için dinamik bir URL bileşeni kullanması gerekir. Rota yolu bağımsız değişkeninde “Post/: ID” kullanacağız ve bileşenlerde, bu kimliğin değerine erişebiliriz.
Var post = vue.component (‘post’, {

Şablon: ‘#TMPL sonrası’,
Veri: function () {
dönüş{
Postalamak: []
}
},
Yüklü: function () {
this.getPost ();
},
yöntem: {
getPost: function () {
Var self = this;
$ .get (config.api.posts + self. $ route.params.id, işlev (r) {
R.Title = R.Title.Rendered;
R.Concent = R.Conent.Rened;
Self. $ set (self, ‘post’, r);
});
}
}
}); Güncellenmiş bir bileşenle, bir yönlendirici oluşturmak için onu ve yayın bileşenlerini kullanabiliriz: var yönlendirici = yeni vuerouter ({{{
Mod: ‘Tarih’,
Güzergah: [
{Yol: ‘/’, isim: ‘ev’, şablon: ‘ merhaba roy. ‘},
{Path: ‘/Posts’, ad: ‘Gönderiler’, Bileşenler: Mesajlar},
{yol: ‘/direkler/: id’, ad: ‘post’, bileşen: yazı},
]
});
Yeni Vue ({
Yönlendirici,
}). $ Mount (‘#Application’) Tabii ki, HTML’yi güncellememiz ve her iki bileşen için bir şablonumuz olduğundan emin olmalıyız. Bu HTML şimdi tanıdık olmalı:
Home
gönderiler
Yönlendirici-view>

{{post.title.rendered}}

Devamını oku

{{yazı başlığı}}

Bu yazıda daha ileri gider, Vuejs kullanarak bir yönlendirici nasıl yapacağınızı öğrendiniz ve ekranı mevcut bileşenlere bağladınız.Vuejs yönlendiricisinin belgelerini keşfetmenizi ve daha fazla bilgi edinmenizi öneririm.Bir sonraki adım, sayfa rotasını, terim için rotayı eklemek ve posta kimliğini kullanmaktan yayındaki Slug Post’a geçiş yapmaktır. Dışarıda, şimdi WordPress Rest API’sını Vuejs ile kullanmanın tüm temellerini tartıştık.Hatta çok havalı bir şey yaratmak için geliştirebileceğiniz bir tema bile sunuyorum, bunu yapacağımı biliyorum.Yaptıklarınızı paylaştığınızdan emin olun.JavaScript API REST çerçevesi hakkında daha fazla bilgi edinmek için bkz. Caldera Learn.