# 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/)。