前端框架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