在 Ember.js 的单页应用（SPA）中，路由（Router）是一个核心概念。它管理了 URL 与视图之间的映射关系，实现了页面的无刷新跳转（也就是前端路由）。使用它可以帮助我们在应用中管理我们的视图，使得整个应用的结构更加清晰、易于维护。
路由的基本概念
路由本质上是一个映射机制，它将 URL 映射成一个或多个视图。在 Ember.js 应用中，路由的主要组成部分包括：
- Router：它是 Ember 应用的根路由对象，它定义了应用的路由规则，并转发路由请求到子路由。
- Route：它代表一个路由，定义了 URL 与视图之间的映射关系。每个 Route 对象都有一个对应的控制器（Controller）和模板（Template）。
- Model：它是数据模型，通过 Route 对象获取数据，然后为控制器和模板提供数据。
如何定义路由
定义路由十分简单，在 app/router.js 文件中，我们可以通过 Router 对象定义我们的路由规则。例如：
-- -------------------- ---- ------- ------ ----------- ---- ------------------------ ------ ------ ---- ----------------------- ----- ------ - -------------------- --------- -------------------- -------- -------------- --- --------------------- - -------------------- -------------------- ---------------------- ---
上面的代码定义了三个路由：index、about、contact。这样，我们就可以访问 /index、/about、/contact 这三个 URL。
如何跳转页面
为了实现页面的无刷新跳转，我们需要使用链接和动态链接。在 Ember.js 中，我们可以使用 link-to 帮助我们生成链接，并使用 transitionTo 帮助我们进行动态路由跳转。
生成链接
我们可以使用 link-to 标签生成链接，它可以接受一个 Route 对象或字符串，然后生成一个链接。例如：
{{#link-to 'about'}}About{{/link-to}}使用上面的代码，我们会生成一个链接，它的 URL 是 /about。
动态路由跳转
有时候我们需要在 JavaScript 代码中实现跳转，这时候我们就可以使用 transitionTo 方法。例如：
this.transitionTo('about');上面的代码将会使我们的应用跳转到 about 路由。
如何使用动态 Segment
动态 Segment（动态片段）是路由中的一个重要特性。它允许我们使用带有参数的 URL。例如，一个带有用户 ID 参数的 URL：/user/123。
在 Ember.js 中，我们可以使用 :paramName 形式来定义动态片段。例如：
Router.map(function() {
this.route('index');
this.route('user', { path: '/user/:user_id' });
});使用上面的代码，我们就定义了一个动态路由 /user/:user_id，其中 user_id 就是动态片段的参数名。
在 Route 中，我们可以使用 params 对象来获取动态路由的参数。例如：
import Route from '@ember/routing/route';
export default Route.extend({
model(params) {
return this.store.findRecord('user', params.user_id);
}
});上面的代码中，我们使用 findRecord 方法从服务器获取用户数据，其中 params.user_id 表示路由中的动态片段参数。
如何使用 Query Params
Query Params 允许我们将查询参数添加到 URL 中。在 Ember.js 的路由中，我们可以使用 queryParams 定义一个或多个查询参数。例如：
Router.map(function() {
this.route('index');
this.route('search', { queryParams: ['q'] });
});上面的代码定义了一个搜索路由，它带有一个查询参数 q。在这个路由中，我们可以使用 controllerFor 方法获取控制器对象，并使用 get/set 方法来读取或设置查询参数。例如：
-- -------------------- ---- -------
------ ---------- ---- --------------------
------ ------- -------------------
--------------- ---------- -
-------------------------------- -
------------ -
-- -----------------
-
---
-------------------
---上面的代码中，我们定义了一个控制器，并在其中添加了一个观察者函数，当查询参数发生变化时，我们会使用 transitionToRoute 方法进行路由跳转。
如何使用嵌套路由
嵌套路由是一种路由组合方式，它允许我们将多个路由组合在一起形成一个更为复杂的应用。在 Ember.js 中，我们可以使用 map 方法将子路由与父路由进行关联。例如：
Router.map(function() {
this.route('index');
this.route('posts', function() {
this.route('index');
this.route('show', { path: '/:post_id' });
});
});上面的代码中，我们定义了一个 posts 父路由，以及 index 和 show 两个子路由。/posts 路由会默认跳转到 index 子路由，如果我们访问 /posts/:post_id，它会跳转到 show 子路由，并带有 post_id 的参数。
Ember.js Router API
- Router.map(callback)：定义路由规则，callback 是一个函数，用于定义路由规则。
- Router.map(function() {})：定义路由规则的快捷方式。
- this.route(name, options)：定义一个路由，name 是路由名，options 是配置参数，包括 path、resetNamespace、resetController、controllerName 等。
- this.resource(name, options)：定义一个资源路由，拥有 CRUD 操作，包括 index、new、edit、show 等。
- this.transitionTo(routeNameOrUrl, ...models)：动态跳转路由，在 JavaScript 中使用。
- this.replaceWith(routeNameOrUrl, ...models)：替换当前路由，并跳转到指定路由。
- this.transitionToRoute(routeName, ...args)：跳转到指定路由，与 this.transitionTo 方法不同的是，它会清除控制器等状态。
- this.controllerFor(name)：获取指定名称的控制器对象。
- this.send(name, ...args)：从路由中发送一个动作。
- this.modelFor(name)：获取指定名称的模型对象。
- this.currentRouteName：获取当前路由名。
- this.setupController(controller, model)：为指定控制器对象设置模型数据，并调用生命周期函数。
总结
路由是 Ember.js 中非常重要的概念之一，它可以让我们进行页面之间的无刷新跳转，并且可以用于构建复杂的应用。在本文中，我们介绍了路由的一些基本概念，以及如何定义路由、如何跳转页面、如何使用动态片段和查询参数、以及如何使用嵌套路由等。希望本文章对您了解和学习 Ember.js 路由有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65901e7ceb4cecbf2d59da83