Как установить/настроить Aurelia router/routes

Я хочу несколько ссылок в верхней части моей страницы, и когда они будут нажаты, разные пользователи представят пользователю на той же странице. Я хочу настроить это с нуля.Как установить/настроить Aurelia router/routes

Я видел несколько примеров онлайн-работы, но когда я пытаюсь настроить его с нуля, используя пример Arelia todo в качестве базовой линии (http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/quick-start), мне, кажется, что-то не хватает. Я предполагаю, что мне нужно установить маршрутизатор Aurelia, но нет инструкции, чтобы сделать это (что я могу найти). Чтение меня на странице Github не дает инструкций по его установке.

Что я знаю.

Я нужен 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: ['settings'], name: 'settings', moduleId: '/settings/settings', nav: true, title: 'Settings'} 
    ]); 


    this.router = router; 

    } 
}

Я понадобится файл app.html, который выглядит примерно так (это перебирает объекты в предыдущего кода и доступа к их свойствам).

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

    <router-view></router-view> 
    <hr> 

</template>

Результаты - пустая страница без ошибок. Любой статический HTML I, расположенный на app.html, будет отображаться, но кроме этого - ничего.

источник

2016-11-23 William

вам не нужно устанавливать Aurelia-маршрутизатор, это уже установленный с каркасом. Ваш код должен работать нормально ... Вы получаете сообщение об ошибке? –

Кроме того, что не нужны скобки массивов вокруг '['settings']' ваш код выглядит отлично. –

Результат - пустая страница без ошибок. Единственное, что отображается на странице, - это статический HTML-код на app.html – William

Если вы следуете дальше от примера с сайта Аурелия, то вы заметили, что main.js в их учебнике

export function configure(aurelia) { 
    aurelia.use.basicConfiguration(); 
    aurelia.start().then(() => aurelia.setRoot()); 
}

Изменить это

export function configure(aurelia) { 
    aurelia.use.standardConfiguration(); 
    aurelia.start().then(() => aurelia.setRoot()); 
}

В мой опыт работы с быстрым стартером, мне также пришлось добавить в index.html «aurelia-routing.min.js». Так что мой index.html выглядит следующим образом:

<body aurelia-app="src/main"> 
    <script src="scripts/system.js"></script> 
    <script src="scripts/config-typescript.js"></script> 
    <script src="scripts/aurelia-core.min.js"></script> 
    <script src="scripts/aurelia-routing.min.js"></script> 
    <script> 
     System.import('aurelia-bootstrapper'); 
    </script> 
    </body>

Если же вы начинаете, чтобы получить больше в Aurelia, я предлагаю вам начать с их next tutorial

источник

2016-12-21 02:15:43 paulb

Как установить/настроить Aurelia router/routes

ответ

Смежные вопросы