VueJS - Perutean
VueJS tidak memiliki fitur router built-in. Kami perlu mengikuti beberapa langkah tambahan untuk menginstalnya.
Unduh langsung dari CDN
Versi terbaru vue-router tersedia di https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com menyediakan tautan cdn berbasis npm. Tautan di atas selalu diperbarui ke versi terbaru. Kita dapat mengunduh dan menyimpannya, dan menggunakannya dengan tag skrip bersama dengan vue.js sebagai berikut -
<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>Menggunakan NPM
Jalankan perintah berikut untuk menginstal vue-router.
npm install vue-routerMenggunakan GitHub
Kita dapat mengkloning repositori dari GitHub sebagai berikut -
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run buildMari kita mulai dengan contoh sederhana menggunakan vue-router.js.
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>
</head>
<body>
<div id = "app">
<h1>Routing Example</h1>
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script type = "text/javascript">
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];
const router = new VueRouter({
routes // short for `routes: routes`
});
var vm = new Vue({
el: '#app',
router
});
</script>
</body>
</html>Output
Untuk memulai dengan perutean, kita perlu menambahkan file vue-router.js. Ambil kode darihttps://unpkg.com/vue-router/dist/vue-router.js dan simpan di file vue-router.js.
Skrip ditambahkan setelah vue.js sebagai berikut -
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>Di bagian body, terdapat link router yang didefinisikan sebagai berikut -
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p><router-link>adalah komponen yang digunakan untuk menavigasi ke konten HTML yang akan ditampilkan kepada pengguna. Properti to adalah tujuan, yaitu file sumber tempat konten yang akan ditampilkan akan dipilih.
Pada potongan kode di atas, kami telah membuat dua tautan router.
Lihatlah bagian skrip tempat router diinisialisasi. Ada dua konstanta yang dibuat sebagai berikut -
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }Mereka memiliki templat, yang perlu ditampilkan saat tautan router diklik.
Berikutnya, adalah routes const, yang mendefinisikan jalur yang akan ditampilkan di URL.
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];Rute menentukan jalur dan komponen. Jalan yaitu/route1 akan ditampilkan di URL saat pengguna mengklik link router.
Komponen mengambil nama template untuk ditampilkan. Jalur dari rute harus cocok dengan tautan router ke properti.
Misalnya, <router-link to = ”path here”> </router-link>
Selanjutnya, instance dibuat ke VueRouter menggunakan potongan kode berikut.
const router = new VueRouter({
routes // short for `routes: routes`
});Konstruktor VueRouter mengambil rute sebagai param. Objek router ditugaskan ke instance vue utama menggunakan potongan kode berikut.
var vm = new Vue({
el: '#app',
router
});Jalankan contoh dan lihat tampilan di browser. Saat memeriksa dan memeriksa tautan router, kami akan menemukan bahwa itu menambahkan kelas ke elemen aktif seperti yang ditunjukkan pada tangkapan layar berikut.
Kelas yang ditambahkan adalah class = “router-link-exact-active router-link-active”. Tautan aktif mendapatkan kelas seperti yang ditunjukkan pada gambar di atas. Hal lain yang perlu diperhatikan adalah, <router-link> dirender sebagai tag.
Alat peraga untuk Tautan Router
Mari kita lihat beberapa properti lagi untuk diteruskan ke <router-link>.
untuk
Ini adalah jalur tujuan yang diberikan ke <router-link>. Saat diklik, nilai untuk akan diteruskan ke router.push () secara internal. Nilainya harus berupa string atau objek lokasi. Saat menggunakan sebuah objek, kita perlu mengikatnya seperti yang ditunjukkan pada contoh 2.
e.g. 1: <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2: <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
"{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.Berikut adalah keluaran dari misalnya 3.
Di jalur URL, name = Tery adalah bagian dari string kueri. Misalnya: http: //localhost/vueexamples/vue_router.html#/route1? Name = Tery
menggantikan
Menambahkan ganti ke tautan router akan memanggil router.replace() dari pada router.push(). Dengan mengganti, riwayat navigasi tidak disimpan.
Example
<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}" replace>Router Link 1</router-link>menambahkan
Menambahkan append ke <router-link> <router-link> akan membuat jalur menjadi relatif.
Jika kita ingin berpindah dari link router dengan path / route1 ke jalur link router / route2, maka akan ditampilkan path di browser sebagai / route1 / route2.
Example
<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>menandai
Saat ini <router-link> dirender sebagai tag. Dalam kasus, kami ingin merendernya sebagai beberapa tag lain, kami perlu menentukan yang sama menggunakan tag = "tagname";
Example
<p>
<router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>Kami telah menetapkan tag sebagai span dan inilah yang ditampilkan di browser.
Tag yang ditampilkan sekarang adalah tag span. Kami masih akan melihat klik berjalan saat kami mengklik tautan router untuk navigasi.
kelas aktif
Secara default, kelas aktif yang ditambahkan saat link router aktif adalah router-link-active. Kita dapat menimpa kelas dengan mengatur seperti yang ditunjukkan pada kode berikut.
<style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>Kelas yang digunakan adalah active_class = ”_active”. Ini adalah keluaran yang ditampilkan di browser.
kelas-aktif-tepat
Kelas eksakaktif default yang diterapkan adalah router-link-exact-active. Kita dapat menimpanya menggunakan kelas-aktif-tepat.
Example
<p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>Inilah yang ditampilkan di browser.
peristiwa
Saat ini, event default untuk router-link adalah event click. Kita bisa mengubah hal yang sama menggunakan properti event.
Example
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>Sekarang, ketika kita mengarahkan mouse ke tautan router, itu akan menavigasi seperti yang ditunjukkan pada browser berikut. Arahkan mouse pada tautan Router 1 dan kita akan melihat navigasi berubah.
