4.2 Routing -- Defining Your Routes

Posted 2020-06-08

一、概述

1. 当应用程序启动时，路由器负责显示模板，加载数据，另外还设置应用程序的状态。这是通过匹配当前URL到你定义的routes来实现的。

2. Ember app router中的Map方法可以被调用来定义URL映射。当调用Map时，你应该传递一个function，它将会被调用，this会被设置为一个对象，你可以用它来创建路由。

app/router.js

Router.map(function() {
  this.route(‘about‘, { path: ‘/about‘ });
  this.route(‘favorites‘, { path: ‘/favs‘ });
});

• 现在当用户访问/about，Ember.js将会渲染about模板。访问/favs将会渲染favorites模板。

3. 小心！你会得到一些默认的路由：route:application和route:index(对应的路径是"/")。

如果路径名字和路由名字一样你可以省略路径只写路由名字，例子：

app/router.js

Router.map(function() {
  this.route(‘about‘);
  this.route(‘favorites‘, { path: ‘/favs‘ });
});

在你的模板中，你可以使用{{link-to}}在路由之间跳转，使用和提供的路由方法相同的名字（例如/，名字是inde）。

{{#link-to ‘index‘}}<img class="logo">{{/link-to}}

<nav>
  {{#link-to ‘about‘}}About{{/link-to}}
  {{#link-to ‘favorites‘}}Favorites{{/link-to}}
</nav>

{{link-to}}还会添加一个active类指向当前激活的路由。

4. 你可以通过创建一个Ember.Route子类为一个路由自定义行为。例如，自定义当用户访问"/"时应该发生什么，创建route:index:

app/routes/index.js

export default Ember.Route.extend({
  setupController(controller) {
    // Set the IndexController‘s `title`
    controller.set(‘title‘, ‘My App‘);
  }
});

对于index template来说controller:index是开始的上下文。现在你已经设置了title，你可以使用下面的模板了：

<!-- get the title from the IndexController -->
<h1>{{title}}</h1>

（如果你没有明确定义controller:index，Ember.js会自动为你生成。）

5. Ember.js根据你传递给this.route的name推算出routes和controllers的名字。

 

URL	Route Name	Controller app/controllers/	Route app/routes/	Template app/templates/
/	index	?index.js	?index.js	?index.hbs
/about	about	?about.js	?about.js	?about.hbs
/favs	favorites	?favorites.js	?favorites.js	?favorites.hbs

二、Nested Routes

你可通过传递给this.route一个回调函数来定义一个嵌套的routes。

app/router.js

Router.map(function() {
  this.route(‘posts‘, { path: ‘/posts‘ }, function() {
    this.route(‘new‘);
  });
});

这个路由器创建这些路由：

 

URL	Route Name	Controller app/controllers/	Route app/routes/	Template app/templates/
/	index	?index.js	?index.js	?index.js
N/A	posts	?posts.js	?posts.js	?posts.hbs
/posts	posts.index	?posts.js ?posts/index.js	?posts.js ?posts/index.js	?posts.hbs ?posts/index.hbs
/posts/new	posts.new	?posts.js ?posts/new.js	?posts.js ?posts/new.js	?posts.hbs ?posts/new.hbs

• 一个嵌套路由的名字包含它的祖先。如果你想切换到一个路由（通过transitionTo或者{{#link-to}}），确保使用路由的全名（posts.new或者new）。
• 也就是说，切换到posts或者创建一个链接到posts相当于切换到posts.index或者链接到posts.index。
• 访问/会渲染index模板和你希望的一样。
• 访问/posts会有一点差异。它将会先渲染posts模板。然后，它将在posts模板的outlet中呈现posts/index模板。
• 最后，访问/posts/new将会先呈现posts模板，然后将会在它的outelet中呈现posts/new模板。

三、Resetting Nested Route Namespace

当你嵌套路由时，它可能会有利于自路由不继承祖先的名字。这允许你参考和重用一个给定的路由，也保持了类名较短。这相当于现在的行为弃用this.resource()函数。

你可以使用resetNamespace: true选项重新设置当前的"namespace"：

app/roputer.js

Router.map(function() {
  this.route(‘post‘, { path: ‘/post/:post_id‘ }, function() {
    this.route(‘edit‘);
    this.route(‘comments‘, { resetNamespace: true }, function() {
      this.route(‘new‘);
    });
  });
});

这个路由器创建5个路由：

/	index	app/controllers/index	app/routes/index	app/templates/index
N/A	post	app/controllers/post	app/routes/post	app/templates/post
/post/:post_id/2	post.index	app/controllers/post/index	app/routes/post/index	app/templates/post/index
/post/:post_id/edit	post.edit	app/controllers/post/edit	app/routes/post/edit	app/templates/post/edit
N/A	comments	app/controllers/comments	app/routes/comments	app/templates/comments
/post/:post_id/comments	comments.index	app/controllers/comments/index	app/routes/comments/index	app/templates/comments/index
/post/:post_id/comments/new	comments.new	app/controllers/comments/new	app/routes/comments/new	app/templates/comments/new

• comments模板将会被加载在post的outlet中。所有在comments中的模板将会被加载在comments的outlet中。
• 对于comments资源来说，route，coutroller和view类名不会有post前缀。

四、Multi-Word Model Names

对于多字的models所有的名字都是驼峰命名除了动态字段。例如，一个model命名为BigMac将会有一个这样的路径/bigMacs/:big_mac_id，路由被命名为bigMac，模板被命名为bigMac。

五、Dynamic Segments

1. 路由处理器的一个职责是把一个URL转换为一个模型。

例如，如果我们的路由是this.route(‘posts‘)，我们的路由处理器将会是这样：

app/routes/posts.js

export default Ember.Route.extend({
  model() {
    return $.getJSON("/url/to/some/posts.json");
  }
});

posts模板将会受到所有可以posts的列表作为它的上下文。

以为/posts代表一个复杂的额模型，我们不需要任何额外的信息去了解要检索什么。然而，如果你需要一个路由代表一个单一的post，我们不会想要在路由器中硬编码每一个可能的post。

2. 输入动态字段。

一个动态字段是一个URL的一部分，它以：开始，紧随其后的是一个标识符：

app/router.js

Router.map(function() {
  this.route(‘posts‘);
  this.route(‘post‘, { path: ‘/post/:post_id‘ });
});

app/routes/post.js

export default Ember.Route.extend({
  model(params) {
    return $.getJSON("/url/to/some/posts/" + params.post_id + ".json");
  }
});

如果在URL中不适id属性，你应该定义在路由中定义一个序列化方法：

app/router.js

Router.map(function() {
  this.route(‘post‘, { path: ‘/posts/:post_slug‘ });
});

app/routes/post.js

export default Ember.Route.extend({
  model(params) {
    // the server returns `{ slug: ‘foo-post‘ }`
    return Ember.$.getJSON(‘/posts/‘ + params.post_slug);
  },

  serialize(model) {
    // this will make the URL `/posts/foo-post`
    return { post_slug: model.get(‘slug‘) };
  }
});

这个默认的serialize方法把model的id插入到路由的动态字段中。（例如:post_id）

六、Initial Routes（最初的）

应用程序中的一些路由是立即可用的：

• 当你的app第一次启动时会进入route:application。它渲染application模板。
• route:index是默认路由，当用户访问/时，将会渲染index模板（除非/已经被你自定义的路由重写）。
• 这些路由是每一个应用程序的一部分，所以你不用在你的app/router.jsi中指定它们。

七、Wildcard/Globbing Routes(通配符)

你可以定义通配符路由，它可以匹配更多路由。例如，当用户输入不正确的URL与你的app不匹配时，你需要一个catch-all路由。

app/router.js

Router.map(function() {
  this.route(‘catchall‘, { path: ‘/*wildcard‘ });
});

比如所有的路由都有一个动态字段，当你使用{{link-to}}或者transitionTo编程进入路由时你必须提供一个上下文。

app/routes/application.js

export default Ember.Route.extend({
  actions: {
    error() {
      this.transitionTo(‘catchall‘, ‘application-error‘);
    }
  }
});

有了这个代码，如果错误冒泡到应用程序的路由，你的app将进入catchall路由并且在URL中显示/application-error。