Vue.js 是一个非常流行的前端框架，它能够帮助我们快速构建现代 Web 应用。Vue.js 支持单页面应用 (SPA) 的开发方式，因此在实现 SPA 应用时，Vue.js 是一个非常好的选择。
本文将介绍 Vue.js SPA 应用的第一步：路由与 HTTP 请求。我们将详细介绍如何使用 Vue.js 的路由和 HTTP 请求模块，以及如何将它们结合起来，构建一个基础的 Vue.js SPA 应用。
路由
在单页面应用中，页面跳转是通过路由实现的。Vue.js 的路由实现基于 Vue Router。Vue Router 是 Vue.js 官方的路由库，它能够帮助我们在应用中实现基于 URL 变化的页面跳转，同时也可以帮我们实现嵌套路由、路由传参等功能。
下面是一个基本的 Vue.js 路由配置示例：
-- -------------------- ---- -------
------ --- ---- ------
------ --------- ---- -------------
-------------------
----- ------ - --- -----------
------- -
- ----- ---- ---------- ---- --
- ----- --------- ---------- ----- --
- ----- ----------- ---------- ------- --
--
---
------ ------- -------在上面的代码中，我们首先引入了 Vue.js 和 Vue Router，然后通过 Vue.use() 安装 Vue Router，接着定义了一个路由实例 router，指定了应用的路由规则。
例如，在这个示例中，我们通过 routes 属性指定了三条路由规则，分别匹配了应用的根路径（'/'）、'about' 和 'contact'。每条路由规则都指定了对应的组件，这些组件将在路由跳转时被渲染到视图中。
然后，我们导出了路由实例。
接下来，我们需要将路由实例挂载到应用中。我们可以在应用的入口文件中，通过如下的代码将路由实例挂载到 Vue 实例上：
-- -------------------- ---- ------- ------ --- ---- ------ ------ --- ---- ------------ ------ ------ ---- ----------- --- ----- --- ------- ------- ------- --- -- ------- ---
在上面的代码中，我们将定义的路由实例 router 作为参数传递给 Vue 实例。这样，在应用启动后，我们就可以通过路由实例中定义的路由规则来进行页面跳转。
HTTP 请求
在开发现代 Web 应用时，经常需要向服务器发送 HTTP 请求来获取数据。在 Vue.js 中，我们可以通过 axios 这个第三方库来进行 HTTP 请求。
下面是一个基本的 axios 配置示例：
import axios from 'axios'; axios.defaults.baseURL = 'http://localhost:3000'; export default axios;
在上面的代码中，我们首先引入了 axios 库，然后通过 axios.defaults.baseURL 属性设置了默认的基础 URL，这个 URL 将被用作所有 HTTP 请求的前缀。例如，在这个示例中，我们设置的默认基础 URL 是 'http://localhost:3000'，那么在所有的 HTTP 请求中，都会将这个 URL 作为前缀，例如 '/api/users' 就会变成 'http://localhost:3000/api/users'。
在实际的应用中，我们需要按照应用实际的需求，调整 axios 的配置。例如，我们可能需要设置默认的请求头信息、跨域请求设置等。axios 官方文档提供了丰富的配置项，可以根据具体需求进行配置。
接下来，我们在组件中使用 axios 发送 HTTP 请求，并将获取到的数据渲染到视图中。下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- -----------
------ ------- -
------ -
------ -
------ ---
--
--
--------- -
------------------
--
-------- -
------------ -
-----------------------
---------------- -- -
---------- - --------------
--
-------------- -- -
---------------------
---
--
--
--在上面的代码中，我们首先导入了我们之前配置好的 axios 实例。然后，我们定义了一个组件，该组件的数据属性 users 用于保存从服务器获取到的数据。在组件的 created 生命周期中，我们调用 fetchUsers 方法，该方法通过 axios 发送 HTTP GET 请求，获取服务器返回的数据。
在请求成功后，我们使用 Promise 的 then 方法对返回的数据进行处理，并将其保存到数据属性 users 中。在请求失败时，我们通过 Promise 的 catch 方法打印错误信息。
结论
在本文中，我们详细介绍了 Vue.js 中路由与 HTTP 请求的基础知识，包括路由的配置、HTTP 请求的配置以及在组件中如何使用它们。
通过本文的学习，我们可以掌握基本的 Vue.js 路由和 HTTP 请求的用法，了解它们在实现 SPA 应用时的重要性。同时，本文也提供了示例代码和实际应用的指导意义，在实际开发中可以帮助我们快速上手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f284bea44b36ee5766329f