【愚公系列】《循序渐进Vue.js 3.x前端开发实践》062-案例：实现一个多页面单页应用程序

愚公搬代码

发布于 2025-06-03 08:18:58

23900

代码可运行

文章被收录于专栏：循序渐进Vue.js 3.x前端开发实践循序渐进Vue.js 3.x前端开发实践

运行总次数：0

代码可运行

🚀前言

在当今的前端开发中，单页面应用程序（SPA）因其流畅的用户体验和快速的响应能力而备受欢迎。虽然 SPA 通常意味着只有一个页面，但通过合理的路由管理和组件化设计，我们可以实现一个多页面的表现，给用户带来更丰富的交互体验。借助 Vue.js 和 Vue Router，我们能够轻松地构建一个功能强大且结构清晰的多页面单页应用程序。

本文将通过一个实际案例，详细展示如何实现一个多页面单页应用。我们将从基础的项目搭建开始，逐步引入路由配置、组件设计、状态管理等关键概念，并通过具体的代码示例讲解如何将这些技术结合起来，实现多个视图在一个页面中的动态切换。

🚀一、案例：实现一个多页面单页应用程序

在这个项目中，我们将使用 Vue 3 和 Vue Router 来创建一个具有多个页面的单页应用。应用将包含以下页面：

首页（Home）
关于我们（About）
产品列表（Products）
产品详情（Product Detail）

下面是详细的实现过程。

🔎1. 创建 Vue 项目

首先，我们使用 Vite 创建 Vue 项目。

npm create vite@latest my-vue-app
cd my-vue-app

🔎2. 安装 Vue Router

在项目中安装 Vue Router：

npm install vue-router@4 --save

🔎3. 设置 Vue Router

在 src/router/index.js 中配置 Vue Router：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import Products from '../components/Products.vue'
import ProductDetail from '../components/ProductDetail.vue'

// 定义路由规则
const routes = [
  { path: '/', component: Home, name: 'Home' },
  { path: '/about', component: About, name: 'About' },
  { path: '/products', component: Products, name: 'Products' },
  { path: '/product/:id', component: ProductDetail, name: 'ProductDetail' }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在这里，我们定义了四个路由：

Home 页面：路径 /
About 页面：路径 /about
Products 页面：路径 /products
ProductDetail 页面：路径 /product/:id，其中 :id 是动态参数，表示产品的 ID。

🔎4. 配置 Vue 应用

在 src/main.js 中使用 Vue Router：

// src/main.js
import { createApp } from 'vue'
import App from './components/Home.vue'
import router from './router'

// 创建 Vue 应用并挂载路由
const app = createApp(App)
app.use(router)
app.mount('#app')

在这里，我们通过 app.use(router) 将 Vue Router 集成到 Vue 应用中。

🔎5. 创建页面组件

在 src/components 目录下，创建以下页面组件。

🦋5.1 Home.vue

<!-- src/components/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <!-- 使用 router-link 实现导航 -->
    <router-link to="/about">About</router-link>
    <router-link to="/products">Products</router-link>
    <router-view></router-view>  <!-- 渲染匹配到的组件 -->
  </div>
</template>

<script setup>
  // 无需额外的逻辑
</script>

🦋5.2 About.vue

<!-- src/components/About.vue -->
<template>
  <div>
    <h1>About Us</h1>
    <p>Welcome to the about page.</p>
    <router-link to="/">Go to Home</router-link>
  </div>
</template>

<script setup>
  // 无需额外的逻辑
</script>

🦋5.3 Products.vue

<!-- src/components/Products.vue -->
<template>
  <div>
    <h1>Products</h1>
    <ul>
      <li><router-link :to="'/product/1'">Product 1</router-link></li>
      <li><router-link :to="'/product/2'">Product 2</router-link></li>
      <li><router-link :to="'/product/3'">Product 3</router-link></li>
    </ul>
  </div>
</template>

<script setup>
  // 无需额外的逻辑
</script>

🦋5.4 ProductDetail.vue

<!-- src/components/ProductDetail.vue -->
<template>
  <div>
    <h1>Product Detail</h1>
    <p>Details of product with ID: {{ productId }}</p>
    <router-link to="/products">Back to Products</router-link>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
const productId = route.params.id
</script>

在 ProductDetail.vue 中，我们通过 useRoute 获取路由的动态参数 id，用于展示产品的详细信息。