EmberJS - 路由器动态段

更新于 2025/12/29 7:52:17

动态段以 route() 方法中的 ":" 开头，后跟标识符。URL 在模型中使用 id 属性定义。

语法

Router.map(function() {
    this.route('linkpage', { path: '/linkpage/:identifier' });
});

示例

以下示例显示如何使用动态段显示数据。打开在 app/templates/ 下创建的文件。在这里，我们使用以下代码 − 将文件创建为 blog-post.hbs

<h2>我的个人资料</h2>
你好

打开 router.js 文件来定义 URL 映射 −

import Ember from 'ember';
//以变量形式访问 Ember.js 库 Ember
import config from './config/environment';
//它以变量形式提供对应用程序配置数据的访问 config

//const 声明只读变量
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

//定义以参数为对象来创建路由的 URL 映射
Router.map(function() {
    this.route('blog-post', { path: '/blog-post/:username'});
});

export default Router;

创建 application.hbs 文件并添加以下代码 −

{{#link-to 'blog-post' 'smith'}}查看个人资料{{/link-to}}
{{outlet}}

要构造 URL，您需要实现序列化钩子，该钩子传递模型并返回以动态段为键的对象。

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') }; 
   }
});