将路由器配置放在 Aurelia 的单独文件中

Question

我正在尝试从 app.js 文件中取出路由器配置并将其放在一个单独的文件中 (app.router.js)。这可能是一件容易做的事，但我不知道该怎么做。

当前 app.js 文件如下所示：

import {Router} from 'aurelia-router';

export class App {

  static inject() { return [Router]; };

  constructor(router) {

    this.router = router;

    // router - put this part in a separate file
    this.router.configure(config => {

      config.title = 'demo';
      config.options.pushState = true;
      config.map([

        // home routes
        { route: ['','home'], moduleId: './home/home', nav: true, title:'Home' },

        // User routes
        { route: ['user/register'], moduleId: './user/register', nav: true, title:'User Registration'}

      ]);

    });

  }
}

一旦配置部分在一个单独的文件中，我相信我在 app.js 中这样调用它：

this.router.configure(myRouterConfig);

请告诉我如何使用代码示例进行操作。

Answer 1

当您意识到传递给 this.router.configure 的参数只是一个函数时，解决方案就更容易理解了。要将您的路由器配置放在一个单独的文件中，只需让该文件导出一个接受一个参数的函数 (config).

// app.router.js
export default function (config) {
  config.title = 'demo';
  config.options.pushState = true;

  config.map([
    // home routes
    { route: ['','home'], moduleId: './home/home', nav: true, title:'Home' },
    // User routes
    { route: ['user/register'], moduleId: './user/register', nav: true, title:'User Registration'}
  ]);      
}

然后，在app.js：

import appRouter from 'app.router';

// ...then...
this.router.configure(appRouter);

当然，您可以随意命名 appRouter。

将路由器配置放在 Aurelia 的单独文件中

Put router configuration in a separate file in Aurelia

javascript

module

ecmascript-6

aurelia