前端：你要懂的单页面应用和多页面应用只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站
单页面应用结构视图
多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载，常用于 app 或 客户端等
多页面应用结构视图
具体对比分析：
单页面应用（SinglePage Web Application，SPA）
多页面应用（MultiPage Application，MPA）
一个外壳页面和多个页面片段组成
多个完整页面构成
资源共用(css,js)
共用，只需在外壳部分加载
不共用，每个页面都需要加载
页面局部刷新或更改
a.com/#/pageone
a.com/#/pagetwo
a.com/pageone.html
a.com/pagetwo.html
页面片段间的切换快，用户体验良好
页面切换加载缓慢，流畅度不够，用户体验比较差
依赖 url传参、或者cookie 、localStorage等
搜索引擎优化(SEO)
需要单独方案、实现较为困难、不利于SEO检索 可利用服务器端渲染(SSR)优化
实现方法简易
高要求的体验度、追求界面流畅的应用
适用于追求高度支持搜索引擎的应用
较高，常需借助专业的框架
较低 ，但页面重复代码多
加入掘金和开发者一起成长。发送简历到 hr@xitu.io，期待你的加入！分享没有更多推荐了，
不良信息举报
举报内容：
SPA（单页面应用）的简单实现
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！教你怎样快速创建Vue单页面应用
Vue.js是一套目前比较流行的构建用户界面的渐进式框架，Vue
能够为复杂的单页应用程序提供驱动。废话不多说，进入正题。
<font STYLE="font-size: 20" COLOR="#.安装：
首先您需要安装npm，如何安装npm，请参考node.js相关内容。
$ npm install
全局安装 vue-cli
$ npm install --global
创建一个基于 webpack
模板的新项目
$ vue init webpack
my-project
这里需要一些配置，默认按回车即可，注意&?
lint your code?
这一项选No
$ cd my-project
这时就会运行一个本地服务，服务端口号默认为8080，如下如：
项目结构如下图：
您可以在components中创建多个Vue文件，每个Vue文件就是一个组件，App.vue是主组件，它的模板内容最后在index.html页面展示。
Hello.vue代码如下：
App.vue代码如下：
3.设置路由：
路由设置在router下的index.js中，如下：
4.请求数据：
如果您需要向服务端请求数据，您首先要安装vue-resource
$ npm install vue-resourse
安装完成后您需要在main.js中引入并使用，main.js如下：
比如您在test.vue中使用http请求，如下：
这时就会将请求到的数据展示到test页面中：
至此，我们的一个简单的单页面应用就搭建好了。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。用户操作：
正在加载...
快速入门：使用单页导航 (HTML)
本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅
了解单页导航模型，以及如何通过使用
功能在自己的应用中实现该模型。
有关为你的应用选择最佳导航模式的帮助，请参阅。
同样，你可以在操作时参阅和模式，它们是系列的一部分。
我们假设你了解如何创建基本应用。如果你需要相关帮助，请参阅。
我们假设你熟悉如何使用 Windows JavaScript 库控件。有关如何使用 WinJS 的帮助，请参阅。
创建基本的链接
最简单而且最常用的导航形式是超链接。以下 HTML 代码将会创建一个导航至 page2.html 的超链接。
&p&&a href="page2.html"&Go to page 2&/a&&/p&
由于它是相对链接，因此系统会假定 page2.html 是你的应用中的一个本地页面，相对于当前文档的基础 URL。 例如，如果链接显示在 /folder/default.html 中，则单击该链接会将你带至 /folder/page2.html。注意
如果你针对本地化优化了你的应用（通常最好这样做），该行为将根据 /folder/ 下已本地化的内容文件夹而有所不同。请参阅。
如果要为你的应用程序中的一个本地文件明确指定完整的 URI，使用新的已打包内容 URL 方案 (ms-appx)，如下所示：
ms-appx://package name/file path
如果希望省略应用包名称，你可以这样做。
ms-appx:///file path
下面提供了一个示例。
&p&&a href="ms-appx:///page2.html"&Go to page 2&/a&&/p&
在引用应用包中所包含的任何文件时，你可以使用 ms-appx URL 方案。然而，我们推荐使用相对 URL，因为会根据文档的基础 URL 自动解析这些 URL。
单页面导航：推荐的模式
上一个示例向你显示了如何创建可以执行顶级导航的链接。这适用于网页，但你不应在应用中执行顶级导航，有以下几个原因：
当应用加载下个页面时，屏幕将为空。
脚本上下文将被破坏，并且必须重新初始化。应用可能会接收系统事件，但无法处理这些事件，因为脚本上下文被破坏和重新初始化。
与顶级导航相比，使用单页导航可提供更好的性能和更类似于应用的使用体验。新的 Microsoft Visual Studio 项目中不会自动提供导航控件，因此对新页面的顶级导航是指无法返回到第一个页面，除非你手动创建一个链接或其他导航机制来执行返回操作。而且，你只能在起始页指定应用如何管理其生命周期—当应用启动、关闭或暂停时有何行为。如果你有多个顶级页面，每个页面都必须包含管理应用的生命周期和状态的逻辑。
你应该使用哪一个控件将内容加载到主页？
你可使用文档对象模型 (DOM) 从其他来源加载文档。
对于简单的 HTML 内容（不包含脚本引用的非交互式内容），请使用
对于外部 Web 内容，请尽可能使用
相比，该控件提供更好的隔离、导航、可用性以及对无法在 iframe 中托管的站点的支持。
对于所有其他内容，请使用
Visual Studio 提供了一些，可以使管理导航的工作变得更容易。这些项目模板提供了一个名为 PageControlNavigator 的导航控件，该控件用于在
对象之间导航。 PageControlNavigator 类为你提供了一种可以使用 PageControl 来简化单页导航的方法。
以下步骤将会讲述如何创建包含多个
对象的应用，以及如何使用单页导航模型在这些页面之间进行导航。
步骤 1：创建一个新的导航应用项目
启动 Microsoft Visual Studio 2013 Update 2。
首次运行 Visual Studio 时，它会提示你获取开发人员许可证。
选择“文件”&“新建项目”或从“起始页”选项卡单击“新建项目”。将打开“新建项目”对话框。
在左侧的“模板”窗格中，依次展开“已安装”=&“模板”=&“JavaScript”=&“应用商店应用”。
选择“通用应用”模板类型。JavaScript 可用的项目模板随即将显示在对话框的中心窗格中。
在中心窗格中，选择“导航应用（通用应用）”项目模板。
在“名称”文本框中，键入项目名称。本主题中的示例使用 "NavigationAppExample"。
WinJS.Namespace.define("Application", {
PageControlNavigator: WinJS.Class.define(
// Define the constructor function for the PageControlNavigator.
function PageControlNavigator(element, options) {
// Initialization code.
// Members specified here.
), // . . .
构造函数为导航控件执行初始化操作。少数重要初始化任务需要为 WinJS 事件（如
事件）设置处理程序以及设置应用的主页。（主页值在
属性的 contenthost DIV 元素中指定。）
// Initialization code.
this.home = options.
// The 'nav' variable is set to WinJS.Navigation.
addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);
声明为应用的导航控件（在 default.html 中）的 DIV 元素为所有应用的页面提供内容主机。DIV 元素使用 WinJS
属性将自己声明为导航控件，此控件为应用提供导航模型。所有页面内容均加载到此 DIV。
以下是 default.html 页面的完整标记。
&!-- default.html --&
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&NavigationAppExample&/title&
&!-- WinJS references --&
&link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" /&
&script src="//Microsoft.WinJS.2.0/js/base.js"&&/script&
&script src="//Microsoft.WinJS.2.0/js/ui.js"&&/script&
&!-- NavigationAppExample references --&
&link href="/css/default.css" rel="stylesheet" /&
&script src="/js/default.js"&&/script&
&script src="/js/navigator.js"&&/script&
&div id="contenthost"
data-win-control="Application.PageControlNavigator"
data-win-options="{home: '/pages/home/home.html'}"&&/div&
&!-- &div id="appbar" data-win-control="WinJS.UI.AppBar"&
&button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}"&
&/div& --&
此图示显示了出现在应用的窗口中的不同内容单元：
WinJS.UI.Pages.define("/pages/page2/page2.html", {
ready: function (element, options) {
// ready function implementation.
步骤 3：自定义你的页面
现在，修改你的新页面，以使它显示不同的消息和周天。
打开 page2.html。页面控件项模板将会创建一个 HTML 页面，该页面包含头节（其中包含后退按钮）和页面的主要内容节。
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&page2&/title&
&!-- WinJS references --&
&link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" /&
&script src="//Microsoft.WinJS.2.0/js/base.js"&&/script&
&script src="//Microsoft.WinJS.2.0/js/ui.js"&&/script&
&link href="page2.css" rel="stylesheet" /&
&script src="page2.js"&&/script&
&div class="page2 fragment"&
&header aria-label="Header content" role="banner"&
&button data-win-control="WinJS.UI.BackButton"&&/button&
&h1 class="titlearea win-type-ellipsis"&
&span class="pagetitle"&Welcome to page2&/span&
&section aria-label="Main content" role="main"&
&p&Content goes here.&/p&
&/section&
用以下代码替换主要内容节。
&section aria-label="Main content" role="main"&
&p&Page controls make it easy to divide your app
into modular portions.&/p&
&p&Today is &span id="dayPlaceholder"&&/span&.&/p&
&/section&
现在，你的 page2.html 文件应如下所示。
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&page2&/title&
&!-- WinJS references --&
&link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" /&
&script src="//Microsoft.WinJS.2.0/js/base.js"&&/script&
&script src="//Microsoft.WinJS.2.0/js/ui.js"&&/script&
&link href="page2.css" rel="stylesheet" /&
&script src="page2.js"&&/script&
&div class="page2 fragment"&
&header aria-label="Header content" role="banner"&
&button data-win-control="WinJS.UI.BackButton"&&/button&
&h1 class="titlearea win-type-ellipsis"&
&span class="pagetitle"&Welcome to page2&/span&
&section aria-label="Main content" role="main"&
&p&Page controls make it easy to divide your app
into modular portions.&/p&
&p&Today is &span id="dayPlaceholder"&&/span&.&/p&
&/section&
打开 page2.js。 包含一组预定义的函数，它们会按照预定义的顺序自动调用。页面控件项模板为你包含
函数以及 updateLayout 和 unload 函数。 当用户切换纵向和横向或者更改应用窗口大小时，PageControlNavigator 会调用 updateLayout 函数。 本主题不介绍如何如何定义 updateLayout，但是每个应用都应该执行此操作。请参阅和。
在以下时候调用
函数：加载页面的 DOM，激活控件以及将页面加载到主 DOM 时。
（ 支持其他用于页面生命周期的函数。有关详细信息，请参阅。）
下面是页面控件项模板创建的 page2.js 文件。
// page2.js
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/page2/page2.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
unload: function () {
// TODO: Respond to navigations away from this page.
updateLayout: function (element) {
/// &param name="element" domElement="true" /&
// TODO: Respond to changes in layout.
函数，以便它检索在步骤 2 中创建的跨度 ("dayPlaceholder") 并将其
设置为当前日。
// page2.js
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/page2/page2.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
var dayPlaceholder = document.querySelector("#dayPlaceholder");
var calendar = new Windows.Globalization.Calendar();
dayPlaceholder.innerText =
calendar.dayOfWeekAsString();
unload: function () {
// TODO: Respond to navigations away from this page.
updateLayout: function (element) {
/// &param name="element" domElement="true" /&
// TODO: Respond to changes in layout.
你已经创建并自定义了一个页面。在下一步中，你将使用户能够在运行该应用时导航到你的页面。
步骤 4：使用导航函数在页面之间移动
当你现在运行该应用时，它将显示 home.html；用户无法导航到 page2.html。帮助用户到达 page2.html 的一种简单方法是从 home.html 链接到它。
&!-- home.html --&
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&homePage&/title&
&!-- WinJS references --&
&link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" /&
&script src="//Microsoft.WinJS.2.0/js/base.js"&&/script&
&script src="//Microsoft.WinJS.2.0/js/ui.js"&&/script&
&link href="/css/default.css" rel="stylesheet" /&
&link href="/pages/home/home.css" rel="stylesheet" /&
&script src="/pages/home/home.js"&&/script&
&!-- The content that will be loaded and displayed. --&
&div class="fragment homepage"&
&header aria-label="Header content" role="banner"&
&button data-win-control="WinJS.UI.BackButton"&&/button&
&h1 class="titlearea win-type-ellipsis"&
&span class="pagetitle"&Welcome to NavigationAppExample!&/span&
&section aria-label="Main content" role="main"&
&p&Content goes here.&/p&
&!-- A hyperlink to page2.html. --&
&p&&a href="/pages/page2/page2.html"&Go to page 2.&/a&&/p&
&/section&
如果你运行应用并单击链接，它好像有效：应用将显示 page2.html。问题是，应用执行的是一个顶级导航。它不是从 home.html 导航到 page2.html，而是从 default.html 导航到 page2.html。
function linkClickEventHandler(eventInfo) {
方法以防止默认链接行为（它会直接导航到指定页面）。
function linkClickEventHandler(eventInfo) {
eventInfo.preventDefault();
检索触发了该事件的超链接。
function linkClickEventHandler(eventInfo) {
eventInfo.preventDefault();
var link = eventInfo.
函数，并将链接目标传递到它。（你也可以选择传递描述该页状态的状态对象。有关详细信息，请参阅 。）
function linkClickEventHandler(eventInfo) {
eventInfo.preventDefault();
var link = eventInfo.
WinJS.Navigation.navigate(link.href);
在 home.js 的 ready 函数中，将事件处理程序附加到你的超级链接。
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);
这就是最后一步。以下是 home.js 文件的完整代码。
// home.js
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);
function linkClickEventHandler(eventInfo) {
eventInfo.preventDefault();
var link = eventInfo.
WinJS.Navigation.navigate(link.href);
运行应用并单击 page2.html 的链接。显示的内容如下。
这次使用正确的导航模式显示页面。
控件模板包括一个后退按钮，当你使用
函数进行导航时，它将处于启用状态。当你使用 WinJS.Navigation 函数时，应用将为你存储导航历史记录。 你可通过调用
使用该历史记录向后导航，或者通过调用
向前导航。注意
Windows 应用商店应用通常使用两种导航模式（平面和分层）之一。我们建议不要在平面导航应用中使用
对象。有关详细信息，请参阅。
在你的应用暂停时保存导航历史记录
在你的应用暂停或关闭时，不会自动存储导航历史记录，但你自己可以方便地存储此信息。使用
属性可以检索和导航历史记录，使用
对象可以存储历史记录。 为确保获得流畅的暂停/恢复体验，最好在用户每次导航时存储此信息。
当你的应用恢复时，从
对象检索历史记录信息，并使用它设置
有关如何使用
对象存储和恢复会话数据的示例，请参阅。有关暂停和恢复的详细信息，请参阅。
你已经学习了如何使用
命名空间的对象和方法来支持单页导航模型。
你已经学习了如何使用此单页导航模型来生成应用。你使用模板提供的 PageControlNavigator 类，在自己的应用中使用
功能来实现此模型。
面向开发人员
面向设计人员}