首先，JSF 是一个 HTML 代码生成器。所以它在 JSF 中与在“普通”HTML 中没有什么不同。在 HTML 中创建链接时，您不应该只查看 webapp 项目中的文件系统结构。您应该查看这些资源的公共 URL 结构。即必须调用和下载这些资源的是网络浏览器，而不是网络服务器。网络浏览器对网络服务器中的文件系统结构一无所知。这并不特定于 JSF 项目。这适用于所有网络项目。
相对 URL 与其在 webapp 项目的文件系统结构中的位置无关。它们与当前打开的 HTML 文档的请求 URL 相关，正是您在浏览器地址栏中看到的那个。需要注意的是，当 HTML 文档中存在 <base> 元素时，HTML 文档中所有不以 / 开头的相对 URL 都将变为相对于它。
给定一个配置了FacesServlet映射URL模式*.xhtml的webapp，并以/context的上下文路径部署到localhost:8080，项目Web根目录中/index.xhtml文件的URL将如下：
http://localhost:8080/context/index.xhtml
---- -------------- ------- -----------
| | | `-- resource
| | `-- path (can be multiple folders)
| `-- domain (and port)
`-- scheme
如果您当前位于http://localhost:8080/context/index.xhtml，并且想要创建指向http://localhost:8080/context/calculate/calculate.xhtml 的链接，那么以下所有方式最终都会指向完全相同的绝对 URL。
-
以// 开头的相对 URL 是相对于当前方案的。
<a href="//localhost:8080/context/calculate/calculate.xhtml">link</a>
-
以/ 开头的相对 URL 是相对于域的。
<a href="/context/calculate/calculate.xhtml">link</a>
-
以/ 开头的相对URL不是相对于路径的。
<a href="calculate/calculate.xhtml">link</a>
当你目前在
http://localhost:8080/context/calculate/calculate.xhtml，并且你想链接到http://localhost:8080/context/index.xhtml，那么同样的规则适用：
-
以// 开头的相对 URL 是相对于当前方案的。
<a href="//localhost:8080/context/index.xhtml">link</a>
-
以/ 开头的相对 URL 是相对于域的。
<a href="/context/index.xhtml">link</a>
-
以/ 开头的相对URL不是相对于路径的。
<a href="../index.xhtml">link</a>
您现在可能已经意识到，以/ 开头的相对 URL不依赖于当前路径和域。因此，这就是您真正希望在 Web 应用程序中随处使用的 URL，而不必担心在更改域或在服务器中移动文件时出现维护问题。唯一剩下的就是上下文路径的动态性。您可能已经知道这个值在 webapp 内部是无法控制的。您真的很想避免对其进行硬编码。但是，您可以在 EL 的帮助下轻松地让 JSF 以编程方式打印它。它仅由 HttpServletRequest#getContextPath() 提供，HttpServletRequest 在 EL 中可用作隐式对象 #{request}。
<a href="#{request.contextPath}/index.xhtml">link</a>
<a href="#{request.contextPath}/calculate/calculate.xhtml">link</a>
每次重复此操作只会变得乏味。幸运的是，JSF 提供了<h:link> 组件，其目的就是为了生成一个HTML <a> 元素，并自动内联当前上下文路径。
<h:link value="link" outcome="index.xhtml" />
<h:link value="link" outcome="calculate/calculate.xhtml" />
注意outcome 必须代表一个JSF 视图ID，它不一定与URL 路径相同（当您将FacesServlet 映射到*.xhtml 时会这样）。您甚至可以在此处省略文件扩展名，JSF 会自动将其检测为“隐式导航”机制的一部分。
<h:link value="link" outcome="index" />
<h:link value="link" outcome="calculate/calculate" />
另见：