前端框架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.fragmentinstruction.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
前端框架Aurelia —— 路由Router相关推荐
- 从浏览器跳转到前端框架的路由实现
还记得jquery时代吗,那时前端三大框架还没流行,前端开发者疯狂查着jquery的API文档来进行dom操作,还记得这个地址吗 jquery.cuishifeng.cn/ 是不是很有感觉!(想了解前 ...
- 前端框架Aurelia - GlobalResources()
Introduction 你可能有许多资源需要在多个页面使用.这时候将这些资源做成全局的是明智的. 框架配置class提供了globalResources方法,这个方法的参数是一个或者多个string ...
- 前端框架Aurelia——组件Component(一)
In Aurelia, user interface components are composed of view and view-model pairs. 组件由html和.ts或者.js文件为 ...
- 前端框架Aurelia - feature()
Introduction 有时,您拥有完整的组件或相关功能,它们共同构成了一个"特性".这个"特性"甚至可能是由您的团队中的一组特定的开发人员所拥有的.你想要这 ...
- 前端框架Aurelia - 自定义组件
自定义元素(组件)- 含有ViewModel的自定义组件 .ts文件 1.首先我们要引入两个依赖!customElement和bindable. 2.下面这个例子还示意了如何给自定义组件绑定属性to, ...
- 前端框架Aurelia - Binding Radios
1.Introduction A group of radio inputs is a type of "single select" interface. 单选按钮. Aurel ...
- 前端框架Aurelia - Binding Checkbox
1.checked Bind a boolean property to an input element's checked attribute using checked.bind="m ...
- 前端框架Aurelia - 数据绑定bind(二)
1.String Interpolation字符串插值(羞耻的字眼==) String interpolation expressions enable interpolating (surprise ...
- 前端框架Aurelia - Binding Selects(一)
1.Intruduction A <select> element can serve as a single-select or multiple-select "picker ...
最新文章
- hdu-4686 Arc of Dream
- Dubbo启动,调用方法失败【问题:调用超时】
- JAVA出现空指针异常(初学者)
- win和mac系统Sublime Text 3配置编译c和c++
- php生成字母头像,【PHP】利用现有的PHP库生成简单而独特的头像-----单字符头像生成...
- 如何鉴别硬盘是否是全新的,及HD Tune的使用方法
- UE4 C++无法打开包括文件	C1083
- 原版安装Win10 1909专业版 64位MSDN镜像2020 05
- win10 怎么把任务栏变透明
- 四元数与三维向量相乘运算法则
- C# 红色警戒2无限金钱+电力负载 外挂源码示例
- 利用OpenCV处理图片-马赛克效果
- 52 jQuery-使用fadeIn()和fadeOut()方法实现淡入淡出效果
- html5 跨平台播放器,开源ckplayer 网页播放器, 跨平台(html5, mobile),flv, f4v, mp4, rt...
- 雪城大学Syracuse University介绍
- 浏览器 User-Agent 大全
- Flash Professional / 处理 Flash 文档 XFL(XML格式描述的CS5 FLA)
- GRBL学习-GRBL参数配置
- 钟汉良日记:网络也是江湖,有恩怨情仇有利益纠葛
- 基于STM32的智能数据采集系统