Links
优质
小牛编辑
131浏览
2023-12-01
{{link-to}}组件可用于创建到路由的链接。
语法 (Syntax)
{{#link-to route}}
//code here
{{/link-to}}
下表列出了链接的属性 -
S.No. | 链接和说明 |
---|---|
1 | Multiple Segments 对于多个段,如果路由是嵌套的,则可以为每个段提供模型或标识符。 |
2 | 使用Link-to作为内联助手 通过提供链接文本作为帮助程序的第一个参数,将链接用作内联组件。 |
3 | 在链接上添加其他属性 您可以在创建链接时添加其他属性。 |
4 | Replacing History Entries 您可以使用link-to帮助程序在路径之间移动时向浏览器的历史记录添加条目。 |
例子 (Example)
以下示例显示如何链接到不同的路由。 创建一个新路由并将其命名为note并打开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('note');
});
export default Router;
使用以下代码打开在app/templates/下创建的application.hbs文件 -
{{#link-to 'note'}}Click Here{{/link-to}}
{{outlet}}
当您单击上面的链接时,页面应该打开带有以下文本的note.hbs文件 -
<h4>Welcome to xnip</h4>
{{outlet}}
输出 (Output)
运行ember服务器,您将收到以下输出 -
当您单击该链接时,它将显示模板文件中的文本,如以下屏幕截图所示 -