route

جهاز توجيه مكافحة الشغب

جهاز التوجيه المتساوي البسيط

جهاز التوجيه Riot.js هو الحد الأدنى من تطبيق جهاز التوجيه مع مثل هذه التقنيات:

• متوافق مع DOM Pushstate و History API
• واجهة برمجة التطبيقات الوظيفية المتماثلة
• تدفقات erre.js ومولدات javaScript Async
• rawth.js urls تحليل

لا تحتاج إلى Riot.js للعمل ويمكن استخدامها كوحدة مستقلة.

لـ Riot.js 3 وإصدار المسار الأقدم ، يرجى التحقق من فرع V3

جدول المحتويات

• ثَبَّتَ
• الوثائق
• العروض التوضيحية

ثَبَّتَ

لدينا طبعتان:

طبعة	ملف
وحدة 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 الذي يستمع إلى جميع أحداث النقر التي قد تؤدي إلى تغيير طريق تغيير المسار. يجب أن تكون أحداث تاريخ النافذة 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 أو قائمة من htmlelement

 import { initDomListeners } from '@riotjs/route'

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