引言
随着互联网的快速发展，Web 前端变得越来越重要。前段时间，随着 SPA（单页应用）的兴起，我们也开始经常听到 SPA 这个词。单页应用通过异步加载数据，实现快速响应和无感刷新，受到了众多开发者的喜爱。
但是，有时候我们需要在一个应用中包含多个独立的页面，类似于传统的多页应用（MPA）。这时候，我们应该如何使用 Vue.js 进行开发呢？本文将围绕这个问题展开讨论。
SPA vs MPA：什么是更好的选择？
在设计 Web 应用时，我们需要考虑很多因素。SPA 和 MPA 各自有各自的优缺点，我们应该根据实际需求来选择其中之一。
优点
- SPA 优点：
- 状态实现更加简单
- 前端和后端逻辑分离
- 单页应用更流畅
- 增强了用户体验
- MPA 优点：
- 更利于 SEO
- 更容易维护
- 更容易做性能优化
- 更容易实现多语言支持
- 更易于调试
缺点
- SPA 缺点：
- 首次加载速度较慢
- 不利于 SEO
- 对于不支持 JavaScript 的浏览器兼容性较差
- 非 Vue.js 的默认用法（Vue.js 实现 SPA 需要自己实现路由等功能）
- MPA 缺点：
- 前后端代码需要紧密配合
- 对于多语言支持需要重新编译等操作
- 用户体验稍微逊色一些
综上，我们可以得出下面的结论：
- 如果是社交网站、音乐网站等需要用户体验和动态交互的站点，使用 SPA 较为合适；
- 如果是信息发布网站、博客等需要 SEO 和多语言支持的站点，使用 MPA 更为适合。
基于 Vue.js 实现 SPA
Vue.js 作为前端界面开发的重量级框架，可以方便地开发 SPA 网站。Vue.js 通过路由机制，实现了对于单页应用的完美支持。接下来我们就来看一下如何使用 Vue.js 来开发 SPA。
路由机制
Vue.js 通过路由机制来实现 SPA。它的核心是 Vue Router。
在 Vue.js 中，我们通过 Vue.js 官方推荐的 Vue CLI 来构建项目。Vue CLI 会帮我们配置好 Babel、ESLint 等常用环境，同时也提供了许多配置项，例如是否需要使用 Router、Vuex 等。
如果我们需要使用 Vue Router，我们可以使用命令行命令安装：
$ npm install vue-router
安装完成之后，在项目的 main.js 中配置好路由：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ------ ---- ---------- ------------------------ - ----- --- ----- ------- ------- - -- ------ -----------------
这个文件配置了 Vue 对象、App，以及来自 router.js 的路由设定。
-- -------------------- ---- -------
------ --- ---- -----
------ ------ ---- ------------
------ ---- ---- ------------------
------ ----- ---- -------------------
---------------
------ ------- --- --------
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
-
-
--这个文件设置了 Vue Router 的路由，其中包括了两个路由：Home 和 About。路径分别为 / 和 /about。
利用 Vue.js 实现动态展示
通过 Vue.js 路由机制，我们可以实现常规的 SPA 动态切换。
代码示例
项目搭建过程可以参考经典的 Vue.js 模板项目 vue-webpack-boilerplate。在 vue-webpack-boilerplate 的基础上，我们可以按照如下的步骤来实现一个简单的博客网站：
第一步：项目初始化
下面的命令可以帮助我们快速的构建一个新的 Vue.js 项目：
vue init webpack vue-blog
我们需要做一些选择，例如：
- Project name（项目名称）
- Project description（项目描述）
- Author（作者）
- Use ESLint to lint your code（是否使用 ESLint 检查代码风格）
- Pick an ESLint preset（ESLint 风格配置）
- Setup unit tests（是否需要为项目配置单元测试）
- Setup e2e tests with Nightwatch（是否需要为项目配置e2e测试）
最终生成的初始化项目：
-- -------------------- ---- ------- - --- --------- --- --------------- --- ---- --- --- ---------- --- --- -- --- --- --- ------------- --- --- --- --------------- --- --- --- ------------------- --- --- -------- --- --- ----------------- --- --- ------ --- --- --- --- --- ---------------- --- ---------- - ---- --- ------------ --- ----------------- --- ------------ --- --- --- --- ------- --- --- ------ --- --- --- -------- --- --- ---------- --- --- ------- --- --- ------ --- --- --- -------- - ------ --- --- ----- --- --- --------- --- --- ----------- - ------ --- --- -------- --- --- ---------- - ---- --- --- ---------- - ---- --- ------ --- --- -------- --- -----------------
第二步：添加页面
在 vue-blog 项目中，我们添加了 4 个页面。Home 页面用作展示博客列表，About 页面展示作者信息，Signup 页面用于新用户注册，Signin 页面用于用户登录。
每个页面都有自己的 Vue SFC（Single File Component）：
- Home.vue：
-- -------------------- ---- -------
----------
-----
----
--- ---------------- ------ -- --------- -------------
------------ ------------------------------- ------------- ----------------
---- -------------------------------
-----
-----
------
-----------
--------
------ ----- ---- -------
------ ------- -
---- -- -
------ -
--------- --
-
--
------- -- -
-------------------------------------------------- -
------- -
------- --
-
----------- -- -
------------- - --------
------------ -- -
--------------------- -- ----
--
-
-
---------- About.vue：
<template>
<div>
<h1>About Me</h1>
<p>This is my profile.</p>
</div>
</template>- Signup.vue：
-- -------------------- ---- -------
----------
-----
-------- -------
------
-----
------------------------
------ ----------- -------------------
------
-----
------------------------
------ --------------- -------------------
------
-----
------- ------------- ---------------------------- -----------
------
-------
------
-----------
--------
------ ----- ---- -------
------ ------- -
---- -- -
------ -
--------- ---
--------- --
-
--
-------- -
------ -- -
------------------------------------------------ -
--------- --------------
--------- -------------
----------- -- -
---------------------
------------ -- -
--------------------- -- ----
--
-
-
-
---------- Signin.vue：
-- -------------------- ---- -------
----------
-----
-------- -------
------
-----
------------------------
------ ----------- -------------------
------
-----
------------------------
------ --------------- -------------------
------
-----
------- ------------- ---------------------------- -----------
------
-------
------
-----------
--------
------ ----- ---- -------
------ ------- -
---- -- -
------ -
--------- ---
--------- --
-
--
-------- -
------ -- -
------------------------------------------------ -
--------- --------------
--------- -------------
----------- -- -
---------------------
------------ -- -
--------------------- -- ----
--
-
-
-
---------第三步：添加路由
我们需要按照如下的方式配置路由：
-- -------------------- ---- -------
------ --- ---- -----
------ ------ ---- ------------
------ ---- ---- -------------------
------ ------- ---- ----------------------
------ ----- ---- --------------------
------ ------ ---- ---------------------
------ ------ ---- ---------------------
---------------
------ ------- --- --------
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------------
----- ----------
---------- -------
--
-
----- ---------
----- --------
---------- -----
--
-
----- ----------
----- ---------
---------- ------
--
-
----- ----------
----- ---------
---------- ------
-
-
--这里我们定义了 5 个可供访问的路由：
- /: 网站主页
- /article/:id: 访问文章详情页面，其中 :id 表示文章的 id 号
- /about: 关于作者的页面
- /signup: 新用户注册页面
- /signin: 用户登录页面
第四步：添加 RESTful API
我们可以通过 JSON Server 来通过简单的 API Server 来模拟RESTful API，用来提供数据。具体的过程步骤不再赘述。
第五步：运行应用
我们可以通过下面的命令行命令来启动应用：
npm run serve
这个命令可以启动一个本地的静态服务器。
在浏览器中打开 http://localhost:8080/ 可以看到项目的主页。
基于 Vue.js 实现 MPA
在实现 MPA 的时候，Vue.js 有很多对应的插件和库。下面我们将介绍如何使用 Vue.js 的插件来实现 MPA。
Vue Multi-Page
Vue Multi-Page 是 Vue.js 的一个插件，可以用于解决 Vue.js MPA 开发中的一些问题。
使用 Vue Multi-Page，我们可以仅仅只需要配置一些简单的配置项就可以创建多个页面，并且每个页面都可以有自己的路由。
下面我们将使用 Vue Multi-Page 插件来实现 MPA 的具体操作流程。
第一步：项目初始化
我们可以使用 Vue CLI 快速地创建一个新项目：
vue create vue-blog
这个命令将帮我们创建一个完整的 Vue.js 项目，包括了开发环境、组件文件等等。craete 之后，在根目录下会生成一个 vue.config.js 的配置文件，我们可以在这个文件中添加一些 Vue Multi-Page 的相关配置。
第二步：添加多个页面
我们为每个页面都创建一个文件夹，例如：
-- -------------------- ---- -------
- --------- - ----
- ------
- ---------- - -----------
- ---------- - -- - -----
- ---------- - -- - -----
- ----
- ------- - ----
- ------- - ------
- -----------
- ------
- ------- - -- - ----
- --------- - -- - -----
- -----------
- ------
- ------- - -- - ----
- --------- - -- - -----
- -----------每个入口文件（index.html，page1.html 和 page2.html）的内容可以类似下面这样：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ---------- ------------
-------
------
---- ---------------
------- -----------------------------------
-------
-------其中 src/page1/main.js 类似于下面这样：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ------ ---- ---------- ------------------------ - ----- --- ----- ------- ------- - -- ------ -----------------
第三步：配置 Vue Multi-Page
在配置 Vue Multi-Page 的时候，我们需要在 vue.config.js 中添加一些配置信息。这些配置信息包括页面列表、路径等等。
-- -------------------- ---- -------
-------------- - -
------ -
------ -
------ --------------
--------- --------------------
--------- -------------
------ ---- ---------- ------
--
------ -
------ --------------------
--------- --------------------
--------- -------------
------ ---- ---------- ---- - ---- ---
--
------ -
------ --------------------
--------- --------------------
--------- -------------
------ ---- ---------- ---- - ---- ---
-
-
-在配置了 Vue Multi-Page 之后，我们可以在运行时切换页面，例如：
http://localhost:8080/page1.html
http://localhost:8080/page2.html
Vue Multi-Page 提供了一种简单、高效的方式，通过在 Vue.js 项目中配置多个入口文件来实现多页面应用程序。
结论
本文主要介绍了基于 Vue.js 实现多页面应用开发的相关技术，包括从 SPA 到 MPA 等一系列的功能点。通过本文的学习，可以从更深的层面上去理解 Vue.js 在前端应用开发中的角色和能力，可以对 Vue.js 的学习和应用有更深的理解和把握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f197ca6fbf9601973d88a2