今天，我们将学习如何使用 Vue 构建单页应用程序。

Vue.js 是一个构建交互式Web界面的库。 它为 数据反应式(data-reactive) 组件提供了一个简单而灵活的API。

为了本教程的目的，术语 Vue 指的是 Vue 2.X 版本，除非另有说明。

我们将构建什么

让我们快速了解一下我们正在构建的内容，如图：

完整的示例代码：https://github.com/samuelayo/vue-spapt1

通过本教程希望你已经掌握：

1. Vue 的基础知识。
2. 如何创建 Vue 组件。

开始使用 Vue CLI

为了方便起见，并跳过将 ES6 编译为 ES5 的 webpack 的配置过程，我们会使用 vue cli 。如果您没有安装 Vue cli，我们可以通过执行以下操作进行安装。

sudo npm install -g vue-cli

安装 vue-cli 之后，是时候创建一个 vue 项目了。 为此，我们运行以下命令。

注意：为了本教程的目的，在运行下面的命令时，当问我代码是否 linting 时，我选择了否。

代码 linting 将确保代码的正确缩进，以及空格也不会被保留。但是我喜欢在我的代码中保留空格，以保持代码的美观。

vue init webpack spa

在上面的命令中，我们会注意到两个陌生的单词 webpack 和 spa 。

这个命令中的 webpack 指的是我们想要使用的项目脚手架的模板名称，它是 vue-cli 用来帮我们构建项目模板的。还有不同的模板可以使用，有关这方面的更多信息，你可以访问 这里 。

此命令中的 spa 指的是创建应用程序的目录名称。运行上述代码后，我们需要进入该应用程序目录，并安装模块：

// 进入创建应用程序的目录
  cd spa
// 安装所需的 npm 模块
  npm install
// 运行开发服务
  npm run dev

运行上面的这些命令后，打开 http://localhost:8080 ，我们应该可以看到：

安装和配置 Vue router

现在我们设置并准备开始我们的单页应用程序。但是，我们还需要安装一个依赖，名为 vue-router 。

vue-router 是 Vue 官方提供的 router(路由) 。它与 Vue.js core(核心) 深度整合，使 Vue.js 构建单页应用变得轻而易举。功能包括：

1. 嵌套路由 / 视图映射
2. 模块化，基于组件的路由配置
3. 路由参数，查询，通配符
4. Vue.js transition(过渡) 系统提供的视图过渡效果
5. 精细的导航控制
6. 与自动的激活 CSS 类链接
7. HTML5 history(历史记录)模式 或 哈希模式，在 IE9 中自动回退
8. 可定制的 Scroll(滚动) 行为

如果你以前使用过 angular ，或者你有任何 angular 知识，那么你会发现 vue-router 类似于 angular router ，或者如果你有任何 react 知识，它和 react-router 也很类似。

我们使用 vue-router 的主要原因是它允许我们在 页面/路由 之间进行切换，而不会 刷新/重新 加载页面。

尽管如此，我们来看看如何安装它。

我们可以通过运行以下命令来安装它。

npm install vue-router --save

现在让我们进入 src/main.js 来配置应用程序，以使用 router(路由) 。

复制以下代码，并替换为 src/main.js 内容：

// 通过 `import` 命令加载 Vue 构建版本（runtime-only 或 standalone），
// 该构建版本已在webpack.base.conf中设置了别名。
// 导入 vue 实例
import Vue from 'vue'
// 导入 App 组件
import App from './App'
// 导入 vue router(路由)
import VueRouter from 'vue-router'
// 告诉 vue 使用这个 router(路由)
Vue.use(VueRouter)
// 定义你的 router(路由)
const routes = []

// 创建 router 实例并传递 `routes` 选项
// 您可以在这里传递其他选项，
// 但现在让我们保持简单。
const router = new VueRouter({
  routes, // `routes: routes` 的简写
  mode: 'history'
})
//实例化 vue 实例
new Vue({
// 定义根组件的选择器
  el: '#app',
  // 根组件的 template 
  template: '<app></app>',
  // 声明根组件可以访问的组件 
  components: { App },
  // 传入 router 到 vue 实例
  router
}).$mount('#app')// app 上装载 router

让我们快速看看上面的代码。我们从 node modules 导入 Vue 类，然后我们还导入了 App 组件。

App 组件是由 vue cli 创建的默认组件。然而，我们导入它作为我们的根组件。

之后，我们再导入 vue-router ，然后告诉 Vue 类，它可以通过使用 vue.use(vuerouter) 来使用 vue-router 。

在下一行中，我们定义一个 routes 的常量，现在，我们将其设置为一个空数组。但是，routes 应该是一个对象数组，其中每个对象表示路径。不过，我们很快会看到。

接下来我们要做的是创建我们的 router(路由) 。我们可以传递两个参数给 Vue 路由的实例。

第一个参数是我们上面声明的 routes 数组，另一个参数作为模式。需要说明的是，这里我们把 mode 参数设置为'history'，以防止我们的 URL 中包含 # 标记，这也被证明是不利于 SEO 的，当 URL 中包含 # 标记时。

之后，我们创建一个新的Vue实例，我们将详细配置传入根组件，以及声明 router(路由) 的装载节点。

在此刻，如果我们重启应用服务，我们会注意到，似乎没有任何变化。但是，我们现在已经设置了路由器。

接下来的下一步是用 router(路由) 插槽 <router -view></router> 标签替换我们的App组件的内容，里面每一个组件匹配的视图将被渲染。

现在打开你的 src/App.vue 文件，并将其替换为以下内容：

<template>
  <div id="app">
  <!-- router(路由) 插槽, 其中所有匹配的组件将在这里呈现 -->
  <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>
<!-- 组件样式 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

如果我们看看上面的代码，我们会注意到与 vue cli 自动生成的代码有一些差异，这些差异包括：

• router-view 标签被放置在了 template 内，用于渲染视图。
• 删除 hello 组件的 import 语句。
• 在 script 标签中删除了组件代码块。

这些组件因为不再需要而被删除，但最重要的是添加的 router(路由) 视图标签，如上所述。

此时，如果我们重新加载我们的应用，我们会看到一个空的页面。

设置 router(路由)

现在让我们继续添加 hello 组件作为主页的组件，并添加路径到我们的 routes 数组中。

打开你的 main.js 文件，并通过以下方式替换常量 routes 数组块代码：

// 导入 hello 组件
import Hello from './components/Hello'
// 定义路由
const routes = [
  // 定义应用的根 URL
  { path: '/', component: Hello }
]

如果我们看看上面的代码，我们导入了默认的 hello 组件，并为其分配路径，将其作为处理我们根路径的组件，因此，如果我们重新加载我们的页面，现在应该可以看到，如图：

从上图可以看出，Vue 的 logo 不见了，那是因为在我们替换 App 组件的内容时，删除了图像。

现在我们再定义一个 router(路由) ，因此，让我们再创建一个组件。

所以在 src/components 文件夹内创建一个名为 About.vue 的文件，将以下内容复制到 About.vue 文件中：

<template>
  <div id="about">
  When you have a great story about how your product or service was built to change lives, share it. The "About Us" page is a great place for it to live, too. Good stories humanize your brand, providing context and meaning for your product. What’s more, good stories are sticky -- which means people are more likely to connect with them and pass them on.
  </div>
</template>

<script>
export default {
  name: 'about'
}
</script>
<!-- styling for the component -->
<style>
#about {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

现在来看看上面的组件。该组件在模板中保存一些文本，一旦我们打开关于页面的链接，它将被渲染。但是，我们仍然需要添加新的组件，并设置 router(路由) 路径，然后才能查看。

要做到这一点，打开你的 main.js ，并用下面的代码替换常量 routes 块代码：

// 导入 hello 组件
import Hello from './components/Hello'
// 导入 about 组件
import About from './components/About'
// 定义路由
const routes = [
  // 主页路由
  { path: '/', component: Hello },
  // about 页面路由
  { path: '/about', component: About }
]

在上面的代码中，现在唯一的区别是 导入了 about 组件和添加了 router(路由) 路径。

如果我们现在打开 http://localhost:8080/about，我们会看到 about 组件的文本会被渲染。

使用路由链接

但是，这不是我们想要的。单页面应用的目的是使页面不再需要重新加载。为了这样，我们需要使用 <router -link></router> 标签。

让我们打开 App.vue 文件，然后添加路由链接。所以在组件的 <router -view></router> 声明之前，让我们添加两个路由链接：

<router-link v-bind:to="'/'">Home</router-link>
<router-link v-bind:to="'/about'">About</router-link>

上面的代码会为我们创建两个锚点标签，并动态路由，使页面不需要重新加载。

如果你重新加载你的应用程序，我们会注意到上面添加了两个新的链接。点击这些链接，视图就会改变，并且页面不会重新加载。

在此刻，您的应用程序应该如下图所示。

在下图中，注意上面放置的两个链接，并且该页面不会重新加载。

结论

这篇文章介绍了如何创建一个简单的单页应用程序。

但是，您可以通过以下方式使其变得更加复杂：

• 添加更多路由
• 传递路径参数
• 使用路由保护，设置未经认证的用户可访问路由。

在本教程的下一部分中，我们将访问参数的传递，以及使用路由保护来保护您的应用程序。

完整的示例代码：https://github.com/samuelayo/vue-spapt1

原文链接：https://scotch.io/tutorials/how-to-build-a-simple-single-page-application-using-vue-2-part-1