当前位置: 首页 > 工具软件 > Aurelia > 使用案例 >

前端框架Aurelia —— 路由Router

墨阳羽
2023-12-01

基本配置

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

 类似资料: