前端框架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)方法。