Учебники

Аурелия — Маршрутизация

Январь 1, 2019

Маршрутизация является важной частью каждого приложения. В этой главе вы узнаете, как использовать маршрутизатор в платформе 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

Внутри домашней папки нам нужно создать файлы view и view-model . 

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

Нам также нужны view и view-model для страницы. 

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>

Когда мы запустим приложение, мы сможем изменить маршруты, щелкнув дом или ссылки.

40
Share: