EmberJS - 連結

{{link-to}} 元件可用於建立到路由的連結。

語法

{{#link-to route}}
   //code here
{{/link-to}}

下表列出了連結的屬性 -

序號	連結和說明
1	多個片段對於多個片段，如果為巢狀路由，你可以提供每個片段的模型或識別符號。
2	使用 Link-to 作為內聯幫助器將 link-to 作為內聯元件使用，方法是將連結文字來當做第一個引數提供給幫助器。
3	在連結上新增其他屬性可以在建立連結時新增其他屬性。
4	替換歷史記錄條目透過使用 link-to 幫助器，可以在路由之間移動時將條目新增到瀏覽器的歷史記錄中。

示例

以下示例演示如何連結到不同的路由。建立一個新路由並將它命名為 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 TutorialsPoint</h4>
{{outlet}}

輸出

執行 ember 伺服器，你將收到以下輸出 -

當你單擊該連結時，它將顯示來自模板檔案中的文字，如下面的螢幕截圖所示 -

emberjs_template.htm

列印頁面

序號	連結和說明
1	多個片段對於多個片段，如果為巢狀路由，你可以提供每個片段的模型或識別符號。
2	使用 Link-to 作為內聯幫助器將 link-to 作為內聯元件使用，方法是將連結文字來當做第一個引數提供給幫助器。
3	在連結上新增其他屬性可以在建立連結時新增其他屬性。
4	替換歷史記錄條目透過使用 link-to 幫助器，可以在路由之間移動時將條目新增到瀏覽器的歷史記錄中。