简介
aurelia-router是aurelia官方推出的一款路由管理工具，能够实现前端页面的多页面展示、单页面应用（SPA）路由可控等功能，它是基于MV*模式开发的。
在使用aurelia-router时，需要先安装aurelia-router包。
npm install aurelia-router --save
路由配置
aurelia-router的核心是配置路由。在配置路由时需要将路由指向相应的view和viewModel。
一个最简单的路由配置如下：
-- -------------------- ---- ------- ------ --------------------- ------- ---- ----------------- ------ ----- --- - ------- ------- ------- ----------------------- -------------------- ------- ------- - ------------ - ------ ---- -------- ----- ------- --------- --------- ---- ----- ------ ------ -- - ------ -------- ----- -------- --------- ---------- ---- ----- ------ ------- - --- -------------- - ---- ----------- - ------- - -展开代码
值得注意的是：
- route: 当用户访问的路径符合该route时，会执行对应路由。
- name: 路由名称。
- moduleId: view 和 viewModel 的模块ID。
- nav: 是否显示在顶部Nav中。
- title: 鼠标停留在Nav上显示的标题。
编写view和viewModel
在路由配置中，我们指向了view和viewModel的模块ID。
在我们编写的view中，需要对应显示出路由匹配到的组件。
在我们编写的viewModel中，需要对应匹配到路由后的数据处理逻辑，例如:
export class Home { constructor() { this.message = "欢迎访问我的主页！"; } }
路由传递参数
aurelia-router有两种方式可以传递参数：
- Query参数
- 路径参数
Query参数
Query参数通过URL中 ?XXX=YYY 形式传递。
例如：
config.map([ { route: 'users', moduleId: './users', title:'Users' }, { route: 'users/:id', moduleId: './users/detail', name:'userDetail' } ]);
例如通过点击链接时传递参数：
<a href.bind="router.generate('userDetail', {id:4})">User Detail</a>
路径参数
路径参数通过URL中 /XXX 形式传递。
例如：
config.map([ { route: 'users', moduleId: './users', title:'Users' }, { route: 'users/:id', moduleId: './users/detail', name:'userDetail' } ]);
例如通过点击链接时传递参数：
<a href.bind="router.generate('userDetail', {id:4})">User Detail</a>
路由守卫
路由守卫是在路由跳转过程中触发的事件，用于做一些额外的数据操作或跳转拦截。
aurelia-router 提供了多个路由守卫事件：
- onNew
- onBeforeNavigation
- onAfterNavigation
- onBeforeRouteLeave
- onBeforeRouteUpdate
例如，我们可以在onBeforeNavigation事件中检查用户是否已登录并决定是否跳转：
-- -------------------- ---- ------- ------ ----- --- - ------------------- ---- ---------- ------- ----- ------------ -- ----------------------- -------------------- ------- ------- - - --------------------------------------- -- ---- ----- ------------- - ------ -------------------------- ---------------------- ----- ----- - -- ------ -- ----------------------- - ------ -------------- - -- ------- -- ---------------------- - ------ ------------------------- -- - ------ ------- --- - ------ ------- - - ------------ - ------ --- --------- --------- ---- ----- ------ --------- -- - ------ -------- --------- ---------- ---------- --- -- - ------ ------------ --------- -------------- ----- ----- ------ ----------- - --- - -展开代码
本文介绍了aurelia-router的用法，包括路由配置、编写view和viewModel、路由传递参数以及路由守卫等内容。aurelia-router具有多样性的路由管理功能，可以帮助我们构建复杂的前端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61772
