如何安裝/設置Aurelia路由器/路線

我想在我的頁面頂部有幾個鏈接，點擊它們時，不同的視圖在同一頁面上呈現給用戶。我想從頭開始設置。如何安裝/設置Aurelia路由器/路線

我在網上看到了這個工作的幾個例子，但是當我嘗試使用Arelia待辦事例作爲基準（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我放在app.html將呈現，但除此之外 - 什麼都沒有。

來源

2016-11-23 William

你沒有安裝奧裏利亞路由器，它已經與框架一起安裝。你的代碼應該可以正常工作......你是否收到任何錯誤信息？ –

除了'['settings']'不需要數組括號外，你的代碼看起來很好。 –

結果是沒有錯誤的空白頁面。在頁面上顯示的唯一東西是我放在app.html上的任何靜態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路由器/路線

回答

相關問題