Aurelia - Routing أوريليا - التوجيه

 Aurelia - Routing أوريليا - التوجيه

التوجيه جزء مهم من كل تطبيق. في هذا الفصل ، ستتعلم كيفية استخدام الموجه في إطار عمل Aurelia.

الخطوة 1 - إنشاء الصفحات

لقد أنشأنا بالفعل مجلد مكونات في أحد الفصول السابقة. إذا لم تكن قد قمت بإنشائه بالفعل ، فيجب عليك وضعه داخل مجلد src .

C:\Users\username\Desktop\aureliaApp\src>mkdir components

داخل هذا المجلد، فإننا سنضع المنزل و عن الدلائل.

C:\Users\username\Desktop\aureliaApp\src\components>mkdir home
C:\Users\username\Desktop\aureliaApp\src\components>mkdir about

داخل المنزل مجلد، نحن بحاجة إلى خلق رأي و الرأي طراز الملفات.

C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.js
C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.html

نحن بحاجة أيضا عرض و جهة نظر نموذج ل عن الصفحة.

C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.js
C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.html

ملاحظة - يمكنك أيضًا إنشاء جميع المجلدات المذكورة أعلاه يدويًا.

الخطوة 2 - الصفحات

بعد ذلك ، نحتاج إلى إضافة بعض التعليمات البرمجية الافتراضية إلى الملفات التي أنشأناها.

home.html

<template>
   <h1>HOME</h1>
</template>

home.js

export class Home {}

about.html

<template>
   <h1>ABOUT</h1>
</template>

about.js

export class About {}

الخطوة 3 - جهاز التوجيه

سوف نقوم بإنشاء عرض نموذج ل جهاز التوجيه داخل app.js الملف.

app.js

export class App {
   configureRouter(config, router) {
      config.title = 'Aurelia';
		
      config.map([
         { route: ['','home'],  name: 'home',  
            moduleId: './components/home/home',  nav: true, title:'Home' },
         { route: 'about',  name: 'about',
            moduleId: './components/about/about',    nav: true, title:'About' }
      ]);

      this.router = router;
   }
}

سيتم وضع عرض جهاز التوجيه الخاص بنا في app.html .

app.html

<template>
   <nav>
      <ul>
         <li repeat.for = "row of router.navigation">
            <a href.bind = "row.href">${row.title}</a>
         </li>
      </ul>
   </nav>	
   <router-view></router-view>
</template>

عندما نقوم بتشغيل التطبيق ، يمكننا تغيير المسارات عن طريق النقر فوق الصفحة الرئيسية أو حول الروابط.