EmberJS-路由器

EmberJS的路由器即为管理页面路由的核心组件。它可以快速地将我们的应用程序分解为多个页面，而且每个页面拥有自己的状态和行为。

安装

要使用EmberJS的路由器，我们需要先安装EmberJS。安装EmberJS可以使用npm：

npm install -g ember-cli

创建路由器

创建EmberJS的路由器非常简单。只需要使用ember-cli命令行工具即可：

ember generate router application

这条命令会生成一个名为“application”的路由器。我们可以通过编辑app/router.js文件来指定路由器的功能。

路由器的功能

路由器可以指定一个或多个路径以及对应的处理程序。当用户访问这些路径时，路由器将执行相应的处理程序。

以下是一个使用路由器的基本示例：

import Ember from 'ember';

const Router = Ember.Router.extend({
  location: 'auto',

  rootURL: '/',

  // 定义路由
  // 首页
  index: Ember.Route.extend({
    route: '/',
    connectOutlets: function (router, context) {
      // TODO: 对首页进行内容渲染
    }
  }),

  // 关于我们页面
  aboutUs: Ember.Route.extend({
    route: '/about',
    connectOutlets: function (router, context) {
      // TODO: 对关于我们页面进行内容渲染
    }
  })
});

export default Router;

这个例子中，我们首先使用Router.extend()定义一个新的路由器。然后我们指定了路由器的location属性和rootURL属性以适应我们的应用程序。

接下来，我们定义了两个路由。第一个是index路由，它对应应用程序的主页。第二个是aboutUs路由，对应关于我们页面。每个路由都有一个route属性指定路径和一个connectOutlets()方法用于渲染页面内容。

路由参数

路由参数是在路由处理程序中接收到的数据。它可以是一个或多个值。

以下是一个路由参数的例子：

import Ember from 'ember';

const Router = Ember.Router.extend({
  location: 'auto',

  rootURL: '/',

  // 定义路由
  product: Ember.Route.extend({
    route: '/products/:id',

    connectOutlets: function(router, product) {
      // TODO: 对商品页面进行内容渲染
    }
  })
});

export default Router;

在这个例子中，我们定义了一个名为“product”的路由。它包含一个路由参数id。这个参数可以在connectOutlets()方法中被路由处理程序访问到。

使用路由器

要使用我们的新路由器，我们需要编辑app/router.js文件并导出它：

import Ember from 'ember';
import Router from './router';

var App = Ember.Application.extend({
  Router: Router
});

export default App;

这个文件将我们的路由器包含在EmberJS应用程序中。现在我们可以使用我们定义的路由来导航我们的应用程序。

总结

EmberJS的路由器是一个强大的工具，可以帮助我们把应用程序分解成多个页面和状态。此外，它还可以处理路由参数和连接视图，使得开发应用程序变得更加容易。