route

เราเตอร์จลาจล

เราเตอร์ isomorphic ที่เรียบง่าย

Riot.js Router เป็นการใช้งานเราเตอร์น้อยที่สุดด้วยเทคโนโลยีดังกล่าว:

• เข้ากันได้กับ Dom Pushstate และ History API
• API ฟังก์ชั่น isomorphic
• erre.js สตรีมและเครื่องกำเนิดไฟฟ้า async JavaScript
• rawth.js url parsing

ไม่จำเป็นต้องใช้ Riot.js ในการทำงานและสามารถใช้เป็นโมดูลแบบสแตนด์อโลน

สำหรับ riot.js 3 และเวอร์ชันเส้นทางเก่าโปรดตรวจสอบสาขา V3

สารบัญ

• ติดตั้ง
• เอกสาร
• การสาธิต

ติดตั้ง

เรามี 2 รุ่น:

รุ่น	ไฟล์
โมดูล ESM	index.js
เวอร์ชัน UMD	index.umd.js
โมดูล ESM แบบสแตนด์อโลน	index.standalone.js
โมดูล UMD แบบสแตนด์อโลน	index.standalone.umd.js

การฉีดสคริปต์

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

หมายเหตุ : เปลี่ยนส่วน xxx เป็นหมายเลขเวอร์ชันที่คุณต้องการใช้: Ex 4.5.0 หรือ 4.7.0

โมดูล ESM

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

NPM

$ npm i -S @riotjs/route

ดาวน์โหลดด้วยตัวเอง

• แบบสแตนด์อโลน
• ESM

เอกสาร

ด้วย Riot.js

คุณสามารถนำเข้าส่วนประกอบ <router> และ <route> ในแอปพลิเคชันของคุณและใช้ดังนี้:

 < 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 >

คุณยังสามารถใช้วิธี riot.register ทะเบียนเพื่อลงทะเบียนทั่วโลก

 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> ควรห่อมาร์กอัปแอปพลิเคชันของคุณและจะตรวจจับการคลิกทั้งหมดบนลิงก์ที่ควรเรียกเหตุการณ์เส้นทางโดยอัตโนมัติ

 < 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 >

นอกจากนี้คุณยังสามารถระบุฐานของแอปพลิเคชันของคุณผ่านแอตทริบิวต์ส่วนประกอบ:

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

องค์ประกอบของเราเตอร์ยังมีการโทรกลับ onStarted ซึ่งจะถูกเรียกแบบอะซิงโครนัสหลังจากเหตุการณ์เส้นทางแรกจะถูกเรียก

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

เส้นทาง

ส่วนประกอบ <route> จัดเตรียมคุณสมบัติ route ให้กับเด็ก ๆ (เป็นเพียงวัตถุ URL) ช่วยให้คุณตรวจจับพารามิเตอร์และการสืบค้น 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 >

ส่วนประกอบ <route> แต่ละตัวมีคุณสมบัติวงจรชีวิตของตัวเองเพื่อแจ้งให้คุณทราบเมื่อติดตั้งหรือไม่ได้ติดตั้ง

< 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 >

แบบสแตนด์อโลน

โมดูลนี้ไม่เพียง แต่ออกแบบมาเพื่อใช้กับ Riot.js แต่ยังเป็นโมดูลแบบสแตนด์อโลน โดยไม่นำเข้าส่วนประกอบ Riot.js ในแอปพลิเคชันของคุณคุณสามารถใช้วิธีการหลักที่ส่งออกเพื่อสร้างและปรับแต่งเราเตอร์ของคุณเองเข้ากันได้กับการตั้งค่าส่วนหน้า

ขึ้นอยู่กับการตั้งค่าโครงการของคุณคุณอาจนำเข้าดังนี้:

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

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

พื้นฐาน

โมดูลนี้ทำงานบนโหนดและบนเบราว์เซอร์ที่ทันสมัยมันส่งออกคุณสมบัติ router และ router ที่เปิดเผยโดย 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 ( ) 

เส้นทางฐาน

ก่อนที่จะใช้เราเตอร์ในเบราว์เซอร์ของคุณคุณจะต้องตั้งค่าเส้นทางฐานแอปพลิเคชันของคุณ การตั้งค่านี้สามารถกำหนดค่าได้ง่ายๆผ่านวิธี 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 ( `#` )

การตั้งค่าเส้นทางพื้นฐานของเส้นทางแอปพลิเคชันของคุณเป็นสิ่งจำเป็นและเป็นเส้นทางแรกที่คุณอาจจะทำก่อนที่จะสร้างผู้ฟังเส้นทางของคุณ

การผูกมัด DOM

ตัวอย่างข้างต้นไม่ได้ใช้งานได้จริงในกรณีที่คุณทำงานในสภาพแวดล้อมของเบราว์เซอร์ ในกรณีนี้คุณอาจต้องการผูกเราเตอร์ของคุณกับ DOM ฟังเหตุการณ์การคลิกทั้งหมดที่อาจทำให้เกิดเหตุการณ์การเปลี่ยนเส้นทาง เหตุการณ์ประวัติหน้าต่าง popstate ควรเชื่อมต่อกับเราเตอร์ ด้วยวิธี initDomListeners คุณสามารถบรรลุคุณสมบัติทั้งหมดข้างต้นโดยอัตโนมัติ:

 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 จะสกัดกั้นลิงค์ใด ๆ คลิกที่แอปพลิเคชันของคุณ อย่างไรก็ตามมันยังสามารถรับ htmlelement หรือรายการ htmlelements เป็นอาร์กิวเมนต์เพื่อกำหนดขอบเขตการคลิกฟังเฉพาะในภูมิภาค DOM เฉพาะของแอปพลิเคชันของคุณ

 import { initDomListeners } from '@riotjs/route'

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