使用与奥里利亚子路由器命名路由

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); 
}