多个细分（Multiple Segments）

优质

小牛编辑

127浏览

2023-12-01

对于多个段，如果路由是嵌套的，则可以为每个段提供模型或标识符。

语法 (Syntax)

Router.map(function() {
   this.resource('route_name');
   this.resource('route_name', { path: 'route_path' });
});

例子 (Example)

该示例通过为段提供标识符来显示在嵌套路由中使用多个段。创建两个名称为info和record路由，并打开router.js文件以定义URL映射 -

import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});
Router.map(function() {
   this.route('info');
   this.route('record', { path: 'records/:records_id' });
});
export default Router;

使用以下代码打开在app/templates/下创建的application.hbs文件 -

{{#link-to 'info'}}Fruits{{/link-to}}
{{#link-to 'record' recoModel}}Some Record{{/link-to}}
{{outlet}}

单击“Fruits”链接时，页面应打开info.hbs文件，其中包含以下代码 -

<p>Some Fruits</p>
<ul>
   <li>Orange</li>
   <li>Banana</li>
</ul>
{{outlet}}

如果单击Some Record link ，页面应打开record.hbs文件，其中包含以下代码 -

<p>Some Records</p>
{{model.name}}
{{outlet}}

现在创建控制器application.js ，它将在app/controller/下创建，具有以下代码 -

import Ember from 'ember';
export default Ember.Controller.extend ({
   recoModel: function(){
      //return the records value to the called route
      return {records_id:1, name:'Docs List'};
   }.property()
});

输出 (Output)

运行ember服务器; 你会收到以下输出 -

当您单击Fruits链接时，它将显示模板文件中的以下文本 -

当您单击Some Record链接时，它将显示模板文件中的以下文本 -