Vue3 + Vue Router 实施单页应用(SPA)实例

随着单页应用(SPA)在现代 web 开发中的流行，使用 Vue3 和 Vue Router 来构建一个简单而高效的 SPA 应用变得越来越受到开发者的青睐。本篇博客将为大家详细介绍如何使用 Vue3 和 Vue Router 实现一个基本的单页应用，并在这个过程中使用 Vue 3 的组合式 API(setup 语法糖)来提高代码的可读性和可维护性。

什么是单页应用(SPA)

单页应用是指网页的整个应用只加载一个 HTML 页面，通过 JavaScript 动态更新页面内容。SPA 让用户在不同页面之间切换时没有明显的重新加载体验，从而提供流畅的用户体验。

环境准备

首先，我们需要确保已经安装了 Node.js 和 npm(Node Package Manager)。接下来，使用 Vue CLI 创建一个新的 Vue 项目：

npm install -g @vue/cli
vue create my-spa-app
  • 1.
  • 2.

在创建过程中，选择 Vue 3 的配置选项。创建完成后，进入项目目录：

cd my-spa-app
  • 1.

接着，安装 Vue Router：

vue add router
  • 1.

在安装过程中，选择“使用历史模式”选项。

项目结构

在我们创建的项目中，Vue Router 会自动生成一些初始文件。项目结构大致如下：

my-spa-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── router/
│   │   └── index.js
│   ├── App.vue
│   └── main.js
``## 创建视图组件

在 `src/views` 目录下，我们可以添加多个视图组件，模拟不同的页面。我们将创建三个简单的视图：`Home.vue`、`About.vue` 和 `Contact.vue`。

### Home.vue

```vue
<template>
  <div>
    <h1>欢迎来到我的 SPA 应用</h1>
    <p>这是首页！</p>
  </div>
</template>

<script setup>
</script>

<style scoped>
h1 {
  color: blue;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
About.vue
<template>
  <div>
    <h1>关于我们</h1>
    <p>这是关于我们页面，您可以在这里找到更多信息。</p>
  </div>
</template>

<script setup>
</script>

<style scoped>
h1 {
  color: green;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
Contact.vue
<template>
  <div>
    <h1>联系我们</h1>
    <p>这是联系我们页面，您可以通过以下方式联系到我们！</p>
  </div>
</template>

<script setup>
</script>

<style scoped>
h1 {
  color: red;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

配置路由

接下来，我们需要在 src/router/index.js 文件中配置 Vue Router。添加路由以指向我们刚刚创建的视图组件。

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Contact from '../views/Contact.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.

主组件配置

在 src/App.vue 文件中，我们需要设置路由视图以及导航菜单，以便用户可以在不同页面之间进行切换。

<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
      <router-link to="/contact">联系</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script setup>
</script>

<style>
nav {
  margin-bottom: 20px;
}
nav a {
  margin-right: 15px;
  text-decoration: none;
  color: #42b983;
}
nav a.router-link-exact-active {
  font-weight: bold;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.

启动应用

到此为止，基本的单页应用已经完成。现在，我们可以启动开发服务器并查看效果：

npm run serve
  • 1.

打开浏览器，访问 http://localhost:8080，您将看到 SPA 应用的首页。通过导航链接，您可以轻松切换到关于和联系我们页面，而无需刷新整个页面。

总结

通过本次实践，我们学习了如何使用 Vue3 和 Vue Router 创建一个简单的单页应用(SPA)。利用 Vue 3 的组合式 API 和 setup 语法糖，使得组件的结构更加清晰，易于维护。单页应用的魅力在于它能够给用户带来流畅的交互体验，并且我们的代码结构也更加 modular 和灵活。

当然，随着项目的复杂性增加，Vue Router 还提供了许多其他强大的功能，比如路由懒加载、全局导航守卫等。

 最后问候亲爱的朋友们，并诚挚地邀请你们阅读我的全新著作。 书籍简介

Vue3实施单页应用(SPA)实例_App