动态细分(Dynamic Segments)
优质
小牛编辑
132浏览
2023-12-01
动态段以route()方法中的“:”开头,后跟标识符。 URL在模型中使用id属性定义。
语法 (Syntax)
Router.map(function() {
this.route('linkpage', { path: '/linkpage/:identifier' });
});
例子 (Example)
以下示例显示如何使用动态段来显示数据。 打开在app/templates/下创建的文件。 在这里,我们使用以下代码将文件创建为blog-post.hbs -
<h2>My Profile</h2>
Hello
打开router.js文件以定义URL映射 -
import Ember from 'ember';
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config
//The const declares read only variable
const Router = Ember.Router.extend ({
location: config.locationType,
rootURL: config.rootURL
});
//Defines URL mappings that takes parameter as an object to create the routes
Router.map(function() {
this.route('blog-post', { path: '/blog-post/:username'});
});
export default Router;
创建application.hbs文件并添加以下代码 -
{{#link-to 'blog-post' 'smith'}}View Profile{{/link-to}}
{{outlet}}
要构造URL,您需要实现serialize钩子,该钩子传递模型并返回带有动态段作为键的对象。
import Ember from 'ember';
export default Ember.Route.extend ({
model: function(params, transition) {
return { username: params.username };
},
serialize: function(model) {
return { username: model.get('username') };
}
});
输出 (Output)
运行ember服务器,你会得到以下输出 -
当您单击输出上的链接时,您将看到URL路由为nestedroute/fruits ,它将显示fruits.hbs的结果 -