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