# Vaadin `Link`教程 > 原文： [http://zetcode.com/vaadin/link/](http://zetcode.com/vaadin/link/) 在 Vaadin `Link`教程中，我們學習 Vaadin `Link`組件的基礎。 在 Vaadin 鏈接示例中，我們創建一個鏈接組件，該組件會將我們轉移到外部網頁。 ## Vaadin Vaadin 是流行的 Java Web 開發框架。 它用于構建單頁 Web 應用。 ## Vaadin `Link` `Link`組件允許建立超鏈接。 這是瀏覽器本地處理的常規 HTML 超鏈接（`<a href>`）。 與單擊`Button`時不同，單擊`Link`不會在服務器端引起事件。 可以使用`ExternalResource`鏈接到任意 URL。 ## Vaadin `Link`示例 以下程序演示了 Vaadin `Link`組件的用法。 該鏈接包含文本和圖像。 我們可以使用`setTargetName("_blank")`在新窗口中打開頁面。 `MyUI.java` ```java package com.zetcode; import javax.servlet.annotation.WebServlet; import com.vaadin.annotations.Theme; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.server.ExternalResource; import com.vaadin.server.FileResource; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinService; import com.vaadin.server.VaadinServlet; import com.vaadin.ui.HorizontalLayout; import com.vaadin.ui.Link; import com.vaadin.ui.UI; import java.io.File; @Theme("mytheme") public class MyUI extends UI { @Override protected void init(VaadinRequest vaadinRequest) { HorizontalLayout layout = new HorizontalLayout(); Link link = new Link("Go to stackoverflow.com", new ExternalResource("https://stackoverflow.com/")); String basepath = VaadinService.getCurrent() .getBaseDirectory().getAbsolutePath(); FileResource resource = new FileResource(new File(basepath + "/WEB-Iimg/web.png")); link.setIcon(resource); layout.setMargin(true); layout.addComponents(link); setContent(layout); } @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet { } } ``` 該示例創建一個鏈接組件，該組件將重定向到外部網頁。 ```java Link link = new Link("Go to stackoverflow.com", new ExternalResource("https://stackoverflow.com/")); ``` 創建了`Link`組件； 該網頁由`ExternalResource`指定。 ```java String basepath = VaadinService.getCurrent() .getBaseDirectory().getAbsolutePath(); ``` 使用`getBaseDirectory()`，我們檢索應用上下文目錄。 需要獲取圖標圖像的路徑。 ```java FileResource resource = new FileResource(new File(basepath + "/WEB-Iimg/web.png")); ``` 該圖像是`FileResource`，位于`/WEB-Iimg/`目錄中。  圖：Vaadin `Link` 在本教程中，我們展示了 Vaadin `Link`組件的基礎。 您可能也對相關教程感興趣： [Vaadin 網格教程](/vaadin/grid/)， [Vaadin `DateField`教程](/vaadin/datefield/)， [Vaadin `Button`教程](/vaadin/button/)， [Vaadin 滑塊教程](/vaadin/slider/)， [Vaadin `CheckBox`教程](/vaadin/checkbox/)， [Java 教程](/lang/java/)。