前端框架Aurelia —— 路由Router

基本配置

为了使用Aurelia的路由，我们的组件view必须有一个元素。为了配置路由，组件的VM需要一个configureRouter()方法。

app.html

<template>
  <router-view></router-view>
</template>

Route Configure

export class App {
  configureRouter(config, router) {
    this.router = router;
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'home'],       name: 'home',       moduleId: 'home/index' },
      { route: 'users',            name: 'users',      moduleId: 'users/index',   nav: true },
      { route: 'users/:id/detail', name: 'userDetail', moduleId: 'users/detail' },
      { route: 'files/*path',      name: 'files',      moduleId: 'files/index',   href:'#files',   nav: true }
    ]);
  }
}

route: [”,’home’]的意思是
”空路由表示默认页面，和’home’这条路由对应的模块组件都是home/index

• config.map()将路由添加到路由器。虽然只有route,name,moduleId,nav,href显示在上面的代码中，但是还有其他的属性可以包含在一条路由里面。每条路由的class name是RouteConfig。

• route是匹配传入的URL的模式，它可以使一个string或者一组string。路由可以包含参数化的路由或者通配符。

• href是个可选的属性。如果没有定义，就用route。如果route有好几段（我的理解是有多个选择），那么href是必须的。因为router不知道如何填充参数化部分。
  比如：Wildcard routes are used to match the “rest” of a path (ie: files/*path matches files/new/doc or files/temp).这个通配符可以匹配两个，route就是有segements,那么href就是必须的。

• nav是一个boolean或者数字属性。当被设置为true的时候， route将被包含在router的navigation model中。这个使得简便创建一个动态的menu或者相似的元素。当指定一个number，这个值会被用来排序路由。

export class App {
  configureRouter(config, router) {
    this.router = router;
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'home'],       name: 'home',       moduleId: 'home/index' },
      { route: 'users',            name: 'users',      moduleId: 'users/index',   nav: true },
      { route: 'users/:id/detail', name: 'userDetail', moduleId: 'users/detail' },
      { route: 'files/*path',      name: 'files',      moduleId: 'files/index',   href:'#files',   nav: true }
    ]);
  }
}

这个例子其实相当的精髓，可以看到不同路径的文件的路由应该怎么去写。
你他妈的给我仔仔细细的认真好好看看！！！

---

Options

首先你得明白h5的base标签是什么鬼。
然后在你的html文档里面添加一个base标签。
当你在用JSPM，Requirejs或者相似的模块加载，你也需要配置这个module loader，添加一个base url，对应于你的base标签的href。
最后，记得设置config.options.root来匹配你的base标签的设置。

export class App {
  configureRouter(config) {
    config.title = 'Aurelia';
    config.options.pushState = true;
    config.options.root = '/';
    config.map([
      { route: ['welcome'],    name: 'welcome',     moduleId: 'welcome',      nav: true, title:'Welcome' },
      { route: 'flickr',       name: 'flickr',      moduleId: 'flickr',       nav: true },
      { route: 'child-router', name: 'childRouter', moduleId: 'child-router', nav: true, title:'Child Router' },
      { route: '',             redirect: 'welcome' }
    ]);
  }
}

---

动态指定路由组件

我们可以给路由添加一个navigationStrategy来允许动态路由。
如果含有navigation strategy，Aurelia需要你用期望的moduleId，查看端口或者重定向来配置instruction.config。

export class App {
  configureRouter(config, router) {
    this.router = router;
    config.title = 'Aurelia';
    var navStrat = (instruction) => {
      instruction.config.moduleId = instruction.fragment
      instruction.config.href = instruction.fragment
    }
    config.map([
      { route: ['', 'home'],       name: 'home',       moduleId: 'home/index' },
      { route: 'users',            name: 'users',      moduleId: 'users/index',   nav: true },
      { route: 'users/:id/detail', name: 'userDetail', moduleId: 'users/detail' },
      { route: 'files/*path',       name: 'files',      moduleId: 'files/index',   href:'#files',   nav: true },
      { route: ['', 'admin*path'],   name: 'route',  navigationStrategy: navStrat }
    ]);
  }
}

---

给Route添加额外的data

Although Aurelia does allow you to pass any additional property to a route’s configuration object, settings is the default parameter to which you should add arbitrary data that you want to pass to the route.

export class App {
  configureRouter(config, router) {
    this.router = router;
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'home'],       name: 'home',       moduleId: 'home/index' },
      { route: 'users',            name: 'users',      moduleId: 'users/index',   nav: true },
      { route: 'users/:id/detail', name: 'userDetail', moduleId: 'users/detail' },
      { route: 'files/*path',       name: 'files',      moduleId: 'files/index',   href:'#files',   nav: true, settings: {data: '...'} }
    ]);
  }
}

---

Route是否大小写敏感

export class App {
  configureRouter(config, router) {
    this.router = router;
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'home'],       name: 'home',       moduleId: 'home/index' },
      { route: 'users',            name: 'users',      moduleId: 'users/index',   nav: true, caseSensitive: true },
      { route: 'users/:id/detail', name: 'userDetail', moduleId: 'users/detail' }
    ]);
  }
}

在上面的例子中，我们的路由只会匹配URL片段’/users’ 而不是 ‘/Users’,因为这条路由有caseSensitive为true的属性，它是大小写敏感的。
but since the route ‘users/:id/detail’ is not case sensitive the URL Users/:id/detail would match. By default Aurelia’s routes are not case sensitive.

---

处理未知路由

Aurelia允许你map未知路由。传给mapUnknownRoutes()方法的参数可以是：

• 一个moduleId的字符串，只要route找不到，就会被导航到这个module

• 一个routeConfig对象，只要route找不到，就会被导航到这个configration

• A function which is passed the NavigationInstruction object and can decide the route dynamically.

Using a ModuleId for Unknown Routes

import {RouterConfiguration, Router} from 'aurelia-router';

export class App {
  configureRouter(config: RouterConfiguration, router: Router): void {
    this.router = router;
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'home'],       name: 'home',       moduleId: 'home/index' },
      { route: 'users',            name: 'users',      moduleId: 'users/index', nav: true, caseSensitive: true },
      { route: 'users/:id/detail', name: 'userDetail', moduleId: 'users/detail' }
    ]);

    config.mapUnknownRoutes('not-found');
  }
}

这个例子可以将一个不匹配的路由重定向到not-found这个组件模块。

Using A Function For Unknown Routes

将一个函数作为参数传进mapUnknownRoutes()，这个传进去的函数必须return：

• moduleId

• 一个含有moduleId属性的对象，这个moduleId属性要是string类型的

• 一个RouteConfig对象

• A Promise that resolves to any of the above.

export class App {
  configureRouter(config, router) {
    this.router = router;

    config.title = 'Aurelia';

    var handleUnknownRoutes = (instruction) => {
        return { route: 'not-found', moduleId: 'not-found' };
    }

    config.mapUnknownRoutes(handleUnknownRoutes);

    config.map([
      { route: ['', 'home'],       name: 'home',       moduleId: 'home/index' },
      { route: 'users',            name: 'users',      moduleId: 'users/index',   nav: true },
      { route: 'users/:id/detail', name: 'userDetail', moduleId: 'users/detail' },
      { route: 'files/*path',       name: 'files',      moduleId: 'files/index',   href:'#files',   nav: true }
    ]);
  }
}

---

Redirecting Routes重定向路由

Aurelia允许重定向路由到新的URL 片段，通过指定redirect，redirect要是一个string类型，且string是要由URL片段构成。

config.map([
  { route: '',           redirect: 'home' },
  { route: 'home',       name: 'home',       moduleId: 'home/index' }
]);

Use Redirect On Empty Routes with Child Routers

The redirect is particularly useful when you have an “empty” route pattern (such as the first route above) that maps to a component with a child router. In this case, create a non-empty route and then redirect the empty route to the non-empty route (as above). This will enable the child router to consistently match child routes without getting confused in scenarios where the empty route was matched.
当我们有一条空路由模式，这条路由会map到有子路由的组件上时，redirect会变得特别有用。
在这种情况下，创建一个非空路由然后重定向空路由到这个非空路由上。
这将使得子路由始终匹配子路由，而不用疑惑empty路由匹配到了哪里！！！

route：”指的是默认进来的页面，直接路由到home路由那里，然后home那条路由又是到home/index页面。

---

Pipelines

Aurelia有两个router class，AppRouter和Router。AppRouter继承Router，是main application的router。
Router是给任何child routers用的，包括嵌套路由。
两者主要的不同是piplines只允许AppRouter有，其他任何child routers不允许。

你可以创建你自己的pipeline step，用addPipelineStep方法， 但是Step的name必须matchpipeline的slots。默认slot按顺序来是 authorize，preActivate, preRender, postRender.
Aurelia已经有方法来创建这些slots的pipeline step了。

这里我没怎么看懂：http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/8

一个pipeline step 必须是一个对象， 对象包含一个 run(navigationInstruction, next)方法。

---

Rendering View Ports