Ember.js 如何生成路由

Ember.js 是一个开源的JavaScript框架，用于开发基于模型-视图-控制器（MVC）架构的大型客户端Web应用。Ember.js是最广泛使用的前端应用框架之一。它旨在加快开发速度并提高生产力。目前，它被众多网站使用，包括Square、Discourse、Groupon、LinkedIn、Live Nation、Twitch和Chipotle等。

在Ember.js中，路由是一个处理应用程序中特定URL或路由所需逻辑和数据的类。路由负责从服务器或存储库中检索数据，准备该数据供模板使用，并处理用户操作。

当应用程序启动时，路由器将当前URL与定义的路由进行匹配。路由负责显示模板，加载数据和设置应用程序状态。

第1步： 现在您可以通过键入以下代码片段来创建路由：

ember generate route temp

app / Router.js

JavaScript

import EmberRouter from '@ember/routing/router'; 
import config from 'hello/config/environment'; 
  
export default class Router extends EmberRouter { 
    location = config.locationType; 
    rootURL = config.rootURL; 
} 
  
Router.map(function () { 
    this.route('temp'); 
}); 

上述命令将生成以下文件：

app/route/temp.js

JavaScript

import Route from '@ember/routing/route'; 
  
export default class TempRoute extends Route {} 

app/templates/temp.hbs

HTML

{{page-title "Temp"}} 
{{outlet}}

示例： 在这个示例中，我们将在路由中添加一个动态片段。首先，将查询参数添加到路由器中。

Javascript

import EmberRouter from '@ember/routing/router'; 
import config from 'hello/config/environment'; 
  
export default class Router extends EmberRouter { 
    location = config.locationType; 
    rootURL = config.rootURL; 
} 
  
Router.map(function () { 
    this.route('temp', { path: '/temp/:' }); 
}); 

app/route/temp.js

Javascript

import Route from '@ember/routing/route'; 
  
export default class TempRoute extends Route { 
  
    id = 0; 
    model(params) { 
        this.id = params.id; 
        return 'Route'; 
    } 
    setupController(controller, model) { 
        super.setupController(controller, model); 
        controller.set('id', this.id); 
    } 
} 

app/templates/temp.hbs

HTML

{{page-title "Route"}} 
  
<h1>Temp Route with Id {{this.id}}</h1> 
{{outlet}}

我们将使用动态数据来发出请求。输入以下 URL：

http://localhost:4200/temp/1

输出：