使用與奧裏利亞子路由器命名路由

Question

我有3個級別的嵌套的路由器，這樣的定義：

app.js

configureRouter(config, router) { 
    this.router = router; 
    config.title = 'EagleWeb'; 
    var step = new AuthorizeStep(this.core); 
    config.addAuthorizeStep(step); 
    config.map([ 
    { route: '', redirect: 'home' }, 
    { route: 'home',    name: 'home',    moduleId: 'home/home' }, 
    { route: 'users',    name: 'users',    moduleId: 'users/user-home' }, 
    { route: 'accounting',  name: 'accounting',   moduleId: 'accounting/accounting' } 
    ]); 
} 

會計/ accounting.js

configureRouter(config, router) { 
    config.map([ 
    { route: '', redirect: 'home' }, 
    { route: 'home',  name: 'accounting-home',    moduleId: 'accounting/accounting-home' }, 
    { route: 'accounts', name: 'accounting-accounts',   moduleId: 'accounting/accounts/accounts' }, 
    { route: 'entries', name: 'accounting-entries',   moduleId: 'accounting/entries/entries' } 
    ]); 
    this.router = router; 
} 

accounting/accounts/accounts.js

configureRouter(config, router) { 
    config.map([ 
    { route: '',   redirect: 'list' }, 
    { route: 'list',  name: 'accounting-account-list',    moduleId: 'accounting/accounts/account-list' }, 
    { route: 'view/:id', name: 'accounting-account-view',    moduleId: 'accounting/accounts/account-view' } 
    ]); 
    this.router = router; 
} 

我想導航到第三級，它可以使用普通鏈接標記或直接在URL中輸入（例如， <a href="#/accounting/accounts/view/2">），但沒有下面的方法來命名路由工作：

1. （從app.html，1級試圖訪問3級）<a route-href="route: accounting-account-list">Account List</a>
2. （從app.html，1級試圖訪問3級）<a route-href="route: accounting-account-view; params.bind: {id: 2}">Account #2</a>
3. （來自會計-home.js，級別2嘗試訪問第3級）this.router.navigateToRoute('accounting-account-view', {id: 2});
4. （來自會計-home.js，級別2嘗試訪問第3級）this.router.navigateToRoute('accounting/accounting-accounts/accounting-account-view', {id: 2});

對於＃1-2，當應用加載時，我收到了控制檯日誌錯誤，如Error: A route with name 'accounting-account-list' could not be found. Check that name: 'accounting-account-list' was specified in the route's config.，並且鏈接已死亡。

對於＃3-4，我越來越控制檯日誌錯誤，如Uncaught Error: A route with name 'accounting-account-view' could not be found.我也越來越像很多在控制檯日誌Warning: a promise was rejected with a non-error: [object Object] at _buildNavigationPlan警告在頁面加載時，每次我導航。

我在做什麼錯？我需要做一些特殊的事情來訪問不同路由器級別的路由嗎？

小問題：我需要在每個視圖中都有import {Router} from 'aurelia-router';模型，有些還是沒有？我需要注入嗎？

Answer 1

我在一個客戶端項目上一週前遇到過這種情況。真的，這裏唯一的選擇是先創建所有路線，然後導入它們。如果你有單獨的部分，你可以通過setRoot使用切換根來緩解這種情況（我會在後面進一步解釋）。

我的場景非常相似。我有一個註銷的視圖，它有一些路線; login,register,forgot-password和page/:page_slug（這是用於呈現靜態頁面）。然後我有一個登錄的儀表板視圖，其中有一噸的路線。

聲明：以下代碼示例尚未經過測試，應僅作爲指導。我也使用了TypeScript而不是普通的舊Javascript。將以下內容轉換爲Javascript（如果需要）應該相當簡單。以下是我所用的，可能有更好的方法來做到這一點。

我登錄的儀表板視圖中有很多需要被放入類似以下的分層下拉菜單部分組成：

Users 
    Add 
    List 
    Manage 
Experiments 
    Add 
    List 
    Manage 
Activities 
    Add 
    List 
    Manage 
Ingredients 
    Add 
    List 
    Manage 
Account 
    Profile 
    Notifications 
    Billing 
    Settings 

這是每一個頁面上顯示的菜單。子路由器的問題是路由未提前知道，它們是動態的（即使你定義它們）。只有當你實例化視圖模型（即導航到它）時，Aurelia才知道路線。

我最終選擇的解決方案並不理想，但有點幫助。

我打破了我所有的非認證/面向公衆的路線到名爲一個文件：src/public-routes.ts

export default [ 
    {route: 'login', name: 'login', moduleId: './public/login'}, 
    {route: 'register', name: 'register', moduleId: './public/register'}, 
    {route: 'forgot-password', name: 'forgot', moduleId: './public/forgot-password'}, 
    {route: 'pages/:page_slug', name: 'page', moduleId: './public/page'}, 
]; 

然後我創建一個特定的根文件，這些所謂的src/public-app.ts伴隨src/public-app.html（這包括公衆線路路由器視圖）：

import PublicRoutes from './public-routes'; 

export class PublicApp { 
    configureRouter(config: RouterConfiguration, router: Router) { 
     config.map(PublicRoutes); 
    } 
} 

然後我重複相同的私人儀表板路線。分別替換Public和public的實例，分別替換Private和private。使用平坦路線方法的一個重要提示是，如果您有很多路線，則不會將所有路線包含到一個文件中。

我最終爲我的私人路線所做的事情是爲每個部分創建一個路線文件。所以我的用戶路線有自己的文件user.routes.ts，我的帳戶路線有自己的文件account.routes.ts等等。然後我將它們導入我的主文件（在這種情況下爲private-routes.ts）。

然後我src/main.ts文件裏我轉出的根源取決於用戶是否已登錄：

export async function configure(aurelia: Aurelia) { 
    aurelia.use 
    .standardConfiguration() 
    .feature('resources'); 

    let auth = aurelia.container.get(Auth); 
    let root = auth.isLoggedIn ? './private-app' : './public-app'; 

    await aurelia.start(); 
    aurelia.setRoot(root); 
}