前端框架Aurelia —— 路由Router

xiaoxiao2021-02-27  322

基本配置

为了使用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

转载请注明原文地址: https://www.6miu.com/read-5499.html

最新回复(0)