简介
ember-enhanced-router是一个适用于Ember.js应用程序的npm包，它可以扩展Ember路由器提供更好的性能和功能，使Ember.js应用程序更易于开发和维护。
安装
使用npm进行安装：
npm install ember-enhanced-router --save
或者, 使用yarn：
yarn add ember-enhanced-router
使用
1. 导入模块
导入enhanced-router.js模块，并添加适当的扩展：
-- -------------------- ---- ------- -- ------------- ------ -------------- ---- ------------------------ ------ ------ ---- ----------------------- ----- ------ - ----------------------- --------- -------------------- -------- --------------- -- -- --- --------------------- - -- ---- --- ------ ------- -------
2. 配置选项
配置enhanced-router的选项可以在路由器创建时定义。这些选项可以根据您的应用程序而异。
深度链接
此选项启用深度链接和预加载。它会将页面的标题和URL设置为当前路由的名称和参数。此选项默认为true。
EnhancedRouter.reopen({
useDeepLinking: true
});预加载
此选项启用预加载。在与浏览器的路由同步时，此选项尝试提前加载预期的资源。此选项默认为true。
EnhancedRouter.reopen({
usePreloading: true
});路由策略
此选项定义了路由策略。默认设置是使用HTML5 pushState 作为路由策略。您可以将此选项设置为 'hash', null, 或者其他的替代品。
EnhancedRouter.reopen({
routingStrategy: 'pushState'
});转换器
此选项定义了路由参数的转换器。使用此选项可以将特殊字符转换为预期的路由参数，并捕获和清理路由参数。
EnhancedRouter.reopen({
urlParamsTransformer: function(paramStr) {
// 处理URL参数
return transformedParams;
}
});3. 路由定义
在路由器中定义路由。增加以下功能：
API
路由支持以下API方法：
scrollPosition
请你记住用户滚动的位置，当用户返回到这个路由时，滚动到上次的位置。
scrollPosition: true,
lazyAssets
允许采取懒加载方式的资源
lazyAssets: ['my-asset'],
// 引入懒加载的资源
load: function() {
return import('my-asset');
},next
使用next方法，指定一个将遵循以下对象状态变化：
status: 'loading' status: 'success' status: 'error'
redirect
重定向二级路由
this.router.transitionTo('top-ranking.index');parentMeta
为子路由启用父元信息(这允许一些父组件在不知道子组件的情况下运行)。
parentMeta: function() {
return this.modelFor('node'),
},示例代码：
-- -------------------- ---- -------
-- -------------
------ -------------- ---- ------------------------
----- ------ - -----------------------
--------- --------------------
-------- ---------------
--------------- -----
-------------- -----
---------------- ------------
--------------------- ------------------ -
------ --------------------- ----
-
---
--------------------- -
--------------------
----------------------
------------------- ---------- -
------------------ - ----- ----------- ---
---------------------
---
----------------------- - ----- ------- ---
---
------ ------- -------结论
ember-enhanced-router是一个支持深度链接和预加载的Ember插件。它使得Ember.js应用程序易于维护并提高了性能。优化和扩展Ember路由器是提高Ember.js应用性能和可维护性的重要步骤之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e14a563576b7b1ec9ed