route

Router Riot

Router isomorfik sederhana

Router Riot.js adalah implementasi router minimal dengan teknologi seperti itu:

• Kompatibel dengan dom pushstate dan API sejarah
• API fungsional isomorfik
• Erre.js Streams dan JavaScript Async Generators
• Rawth.js URLS Parsing

Tidak perlu kerusuhan. JS untuk bekerja dan dapat digunakan sebagai modul mandiri.

Untuk Riot.js 3 dan versi rute yang lebih lama, silakan periksa cabang V3

Daftar isi

• Memasang
• Dokumentasi
• Demo

Memasang

Kami memiliki 2 edisi:

edisi	mengajukan
Modul ESM	index.js
Versi UMD	index.umd.js
Modul ESM mandiri	index.standalone.js
Modul UMD mandiri	index.standalone.umd.js

Injeksi skrip

 < script src =" https://unpkg.com/@riotjs/[email protected]/index.umd.js " > </ script >

Catatan : Ubah Bagian xxx ke nomor versi yang ingin Anda gunakan: Ex. 4.5.0 atau 4.7.0 .

Modul ESM

 import { route } from 'https://unpkg.com/@riotjs/route/index.js'

NPM

$ npm i -S @riotjs/route

Unduh sendiri

• Mandiri
• Esm

Dokumentasi

Dengan Riot.js

Anda dapat mengimpor komponen <router> dan <route> dalam aplikasi Anda dan menggunakannya saat berikut:

 < app >
  < router >
    <!-- These links will trigger automatically HTML5 history events -->
    < nav >
      < a href =" /home " > Home </ a >
      < a href =" /about " > About </ a >
      < a href =" /team/gianluca " > Gianluca </ a >
    </ nav >

    <!-- Your application routes will be rendered here -->
    < route path =" /home " > Home page </ route >
    < route path =" /about " > About </ route >
    < route path =" /team/:person " > Hello dear { route.params.person } </ route >
  </ router >

  < script >
    import { Router , Route } from '@riotjs/route'

    export default {
      components { Router , Route }
    }
  </ script >
</ app >

Anda juga dapat menggunakan metode riot.register untuk mendaftarkannya secara global

 import { Route , Router } from '@riotjs/route'
import { register } from 'riot'

// now the Router and Route components are globally available
register ( 'router' , Router )
register ( 'route' , Route ) 

Router

Komponen <router> harus membungkus markup aplikasi Anda dan akan mendeteksi secara otomatis semua klik pada tautan yang harus memicu acara rute.

 < router >
  <!-- this link will trigger a riot router event -->
  < a href =" /path/somewhere " > Link </ a >
</ router >
<!-- this link will work as normal link without triggering router events -->
< a href =" /path/to/a/page " > Link </ a >

Anda juga dapat menentukan basis aplikasi Anda melalui atribut komponen:

 < router base =" /internal/path " >
  <!-- this link is outside the base so it will work as a normal link -->
  < a href =" /somewhere " > Link < a >
</ router >

Komponen router juga memiliki panggilan balik onStarted yang akan disebut secara tidak sinkron setelah acara rute pertama akan dipanggil

 < router onStarted =" {onRouterStarted} " > </ router > 

Rute

Komponen <route> menyediakan properti route untuk anak -anaknya (ini hanya objek URL) yang memungkinkan Anda untuk mendeteksi param dan kueri URL.

 < route path =" /:some/:route/:param " > {JSON.stringify(route.params)} </ route >

< route path =" /search(.*) " >
  <!-- Assuming the URL is "/search?q=awesome" -->

  {route.searchParams.get('q')}
</ route >

Setiap komponen <route> memiliki atribut siklus hidupnya sendiri untuk memberi tahu Anda saat dipasang atau tidak dipasang.

< app >
  < router >
    < route path = " /home "
      on-before-mount ={ onBeforeHomeMount }
      on-mounted ={ onHomeMounted }
      on-before-update ={ onBeforeHomeUpdate }
      on-updated ={ onHomeUpdated }
      on-before-unmount ={ onBeforeHomeUnmount }
      on-unmounted ={ onHomeUnmounted }
    />
  </ router >
</ app >

Mandiri

Modul ini tidak hanya dirancang untuk digunakan dengan Riot.js tetapi juga sebagai modul mandiri. Tanpa mengimpor komponen Riot.js dalam aplikasi Anda, Anda dapat menggunakan metode inti yang diekspor untuk membangun dan menyesuaikan router Anda sendiri yang kompatibel dengan segala jenis pengaturan frontend.

Bergantung pada pengaturan proyek Anda, Anda mungkin mengimpornya sebagai berikut:

 // in a Riot.js application
import { route } from '@riotjs/route'

// in a standalone context
import { route } from '@riotjs/route/standalone' 

Fundamental

Modul ini berfungsi pada node dan pada browser modern apa pun, ia mengekspor properti router dan router yang diekspos oleh Rawth

 import { route , router , setBase } from '@riotjs/route'

// required to set base first
setBase ( '/' )

// create a route stream
const aboutStream = route ( '/about' )

aboutStream . on . value ( ( url ) => {
  console . log ( url ) // URL object
} )

aboutStream . on . value ( ( ) => {
  console . log ( 'just log that the about route was triggered' )
} )

// triggered on each route event
router . on . value ( ( path ) => {
  // path is always a string in this function
  console . log ( path )
} )

// trigger a route change manually
router . push ( '/about' )

// end the stream
aboutStream . end ( ) 

Jalur dasar

Sebelum menggunakan router di browser Anda, Anda harus mengatur jalur dasar aplikasi Anda. Pengaturan ini dapat dikonfigurasi hanya melalui metode setBase :

 import { setBase } from '@riotjs/route'

// in case you want to use the HTML5 history navigation
setBase ( `/` )

// in case you use the hash navigation
setBase ( `#` )

Mengatur jalur dasar rute aplikasi Anda adalah wajib dan merupakan yang pertama yang mungkin akan Anda lakukan sebelum membuat pendengar rute Anda.

Dom Binding

Contoh di atas tidak benar -benar praktis jika Anda bekerja di lingkungan browser. Dalam hal ini Anda mungkin ingin mengikat router Anda ke DOM mendengarkan semua acara klik yang mungkin memicu acara perubahan rute. Acara popstate Sejarah Jendela juga harus terhubung ke router. Dengan metode initDomListeners Anda dapat secara otomatis mencapai semua fitur di atas:

 import { initDomListeners } from '@riotjs/route'

const unsubscribe = initDomListeners ( )
// the router is connected to the page DOM

// ...tear down and disconnect the router from the DOM
unsubscribe ( )

initDomListeners akan mencegat tautan apa pun klik pada aplikasi Anda. Namun itu juga dapat menerima htmlelement atau daftar htmlelements sebagai argumen untuk ruang lingkup klik pendengar hanya ke wilayah dom tertentu dari aplikasi Anda

 import { initDomListeners } from '@riotjs/route'

initDomListeners ( document . querySelector ( '.main-navigation' ) )