Links

优质

小牛编辑

130浏览

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服务器，您将收到以下输出 -

当您单击该链接时，它将显示模板文件中的文本，如以下屏幕截图所示 -