4.使用navigate函数
当此时运行应用程序时，会显示homePage.html文件；但是无法使用户导航访问page2.html。如果想让用户访问page2.html，一个简单的方法就是添加超链接。如下面代码所示：
<!-- homePage.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>homePage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet">
<link href="/css/homePage.css" rel="stylesheet">
<script src="/js/homePage.js"></script>
</head>
<body>
<!—下面的内容将会被加载并显示 -->
<div class="fragment homepage">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Welcome to NavigationAppExample!</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<p>Content goes here.</p>
<!—连接到age2.html的超链接 -->
<p><a href="page2.html">Go to page 2.</a></p>
</section>
</div>
</body>
</html>
运行应用程序，单击超链接，应用程序就会显示page2.html。问题是，如果这样的话，应用程序就会充当顶层导航，应用程序从default.html访问到page2.html而不是从homePage.html到page2.html。如下图11-4所示
图11-4 应用程序导航效果图
但是我们需要的是：当导航时，将homePage.html的内容替换为page2.html。如下图11-5所示
图11-4 page替换homePage效果图
幸运的是，PageControlNavigator控件使得导航的控制更加容易，PageControlNavigator代码（在navigator.js文件中）可以处理WinJS.Navigation.navigated事件，当事件发生时，PageControlNavigator控件就会加载事件指定的页面。只有使用WinJS.Navigation.navigate，WinJS.Navigation.back, 或者 WinJS.Navigation.forward 函数时，WinJS.Navigation.navigate事件才会被触发。
用户需要调用WinJS.Navigation.navigate事件而不是使用超链接的默认动作行为。用户可以使用按钮替换超链接，使用按钮的Click事件处理器调用WinJS.Navigation.navigate事件。或者可以改变超链接的默认动作，这样当用户单击链接时，应用程序就会调用WinJS.Navigation.navigate事件导航到指定的链接目标。为了达到这个目的，需要处理超链接的Cilck事件，并且使用使用此事件停止超链接的默认导航行为，然后调用WinJS.Navigation.navigate函数传递目标链接。
下面是操作方案：
1）在homePage.js文件中，为超链接定义一个click事件处理器。
function linkClickEventHandler(eventInfo) {
}
2）调用preventDefault方法阻止链接的默认属性，使得链接可以直接导航到指定页面。
function linkClickEventHandler(eventInfo) {
eventInfo.preventDefault();
}
3）检索激发事件的超链接。
function linkClickEventHandler(eventInfo) {
eventInfo.preventDefault();
var link = eventInfo.target;
}
4）调用WinJS.Navigation.navigate函数并传递目标链接。也可以选择描传递描述页面状态的状态对象。
function linkClickEventHandler(eventInfo) {
eventInfo.preventDefault();
var link = eventInfo.target;
WinJS.Navigation.navigate(link.href);
}
5）在homePage.js的ready函数中，为超链接附加事件处理器。
//当用户导航到这个页面时这个函数将被调用，它使用应用程序数据填充页面元素。
function ready(element, options) {
// TODO:初始化此处的片段（fragment）。
WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);
}
下面是homePage.js文件的完整代码：
// homePage.js
(function () {
"use strict";
function linkClickEventHandler(eventInfo) {
eventInfo.preventDefault();
var link = eventInfo.target;
WinJS.Navigation.navigate(link.href);
}
//当用户导航到这个页面时这个函数将被调用。它使用应用程序数据填充页面元素
populates the page elements with the app's data.
function ready(element, options) {
// TODO: 初始化此处的片段.
WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);
}
WinJS.UI.Pages.define("/html/homePage.html", {
ready: ready
});
})();
运行应用程序，单击链接，如下图11-5所示会链接到page2.html。
图11-5 链接page2.html效果图
该页面显示的是使用适当导航模式的时间。并且最终导航的成功，将homePage.html的内容替换为page2.html，如下图11-6所示。
图11-6 时间显示模式
注意，现在页面有一个Back按钮。当用户使用WinJS.Navigation函数导航时，Page控件模板里面包含的Back按钮就是可用的。当使用WinJS.Navigation函数时，应用程序自动存储用户的导航历史。可以调用WinJS.Navigation.Back函数，在导航历史中进行回退，或者可以调用WinJS.Navigation.forward函数继续向前导航。