Vue 3 + Vue Router 实施单页应用（SPA）实例

简介

随着单页应用（SPA）在现代 Web 开发中的流行，使用 Vue 3 和 Vue Router 来构建一个简单而高效的 SPA 应用变得越来越受到开发者的青睐。本篇博客将为大家详细介绍如何使用 Vue 3 和 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

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

cd my-spa-app

接着，安装 Vue Router：

vue add router

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

项目结构

在我们创建的项目中，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

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

<script setup>
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

About.vue

<template>
  <div>
    <h1>关于我们</h1>
    <p>这是关于我们页面，您可以在这里找到更多信息。</p>
  </div>
</template>

<script setup>
</script>

<style scoped>
h1 {
  color: green;
}
</style>

Contact.vue

<template>
  <div>
    <h1>联系我们</h1>
    <p>这是联系我们页面，您可以通过以下方式联系到我们！</p>
  </div>
</template>

<script setup>
</script>

<style scoped>
h1 {
  color: red;
}
</style>

配置路由

接下来，我们需要在 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;

主组件配置

在 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>

启动应用

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

npm run serve

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

总结

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

当然，随着项目的复杂性增加，Vue Router 还提供了许多其他强大的功能，比如路由懒加载、全局导航守卫等。希望通过这篇文章，您能对使用 Vue 3 和 Vue Router 构建 SPA 有更深入的理解和实践经验。