Ember.js SPA 应用中如何使用路由 (Router) 实现页面跳转-JavaScript中文网-JavaScript教程资源分享门户

在 Ember.js 的单页应用（SPA）中，路由（Router）是一个核心概念。它管理了 URL 与视图之间的映射关系，实现了页面的无刷新跳转（也就是前端路由）。使用它可以帮助我们在应用中管理我们的视图，使得整个应用的结构更加清晰、易于维护。

路由的基本概念

路由本质上是一个映射机制，它将 URL 映射成一个或多个视图。在 Ember.js 应用中，路由的主要组成部分包括：

Router：它是 Ember 应用的根路由对象，它定义了应用的路由规则，并转发路由请求到子路由。
Route：它代表一个路由，定义了 URL 与视图之间的映射关系。每个 Route 对象都有一个对应的控制器（Controller）和模板（Template）。
Model：它是数据模型，通过 Route 对象获取数据，然后为控制器和模板提供数据。

如何定义路由

定义路由十分简单，在 app/router.js 文件中，我们可以通过 Router 对象定义我们的路由规则。例如：

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('index');
  this.route('about');
  this.route('contact');
});

上面的代码定义了三个路由：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 方法来读取或设置查询参数。例如：

import Controller from '@ember/controller';

export default Controller.extend({
  queryDidChange: function() {
    this.transitionToRoute('search', {
      queryParams: {
        q: this.get('query')
      }
    });
  }.observes('query')
});

上面的代码中，我们定义了一个控制器，并在其中添加了一个观察者函数，当查询参数发生变化时，我们会使用 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

Ember.js SPA 应用中如何使用路由 (Router) 实现页面跳转