單頁(yè)應(yīng)用（SPA，Single Page Application）是現(xiàn)代前端開發(fā)的主流模式。Vue.js 是一個(gè)非常適合構(gòu)建 SPA 的框架，它通過 Vue Router 實(shí)現(xiàn)頁(yè)面導(dǎo)航，通過組件化開發(fā)和狀態(tài)管理實(shí)現(xiàn)復(fù)雜的交互功能。本篇教程將帶你了解 SPA 的基本概念，并一步步創(chuàng)建一個(gè) Vue.js 單頁(yè)應(yīng)用。

---

什么是單頁(yè)應(yīng)用（SPA）？

單頁(yè)應(yīng)用是一種只有一個(gè) HTML 頁(yè)面，通過 JavaScript 動(dòng)態(tài)加載內(nèi)容的應(yīng)用。特點(diǎn)包括：

• 頁(yè)面切換時(shí)無需重新加載整個(gè)頁(yè)面。
• 提升用戶體驗(yàn)，頁(yè)面響應(yīng)速度更快。
• 依賴客戶端渲染，通常與 API 配合使用。

常見的單頁(yè)應(yīng)用例子：

• Gmail
• Trello
• 微信網(wǎng)頁(yè)版

---

創(chuàng)建你的第一個(gè) Vue.js SPA

1. 準(zhǔn)備開發(fā)環(huán)境

在開始之前，請(qǐng)確保你的系統(tǒng)已安裝以下工具：

• Node.js 和 npm：確保安裝 Node.js（包含 npm）。
• Vue CLI：Vue 的官方腳手架工具，用于快速搭建項(xiàng)目。

安裝 Vue CLI：

npm install -g @vue/cli

2. 創(chuàng)建一個(gè) Vue 項(xiàng)目

使用 Vue CLI 創(chuàng)建一個(gè)項(xiàng)目：

vue create vue-spa-demo

在提示中選擇以下選項(xiàng)：

• Default (Vue 3)：選擇默認(rèn)配置（包含 Babel 和 ESLint）。
• 或選擇 Manually select features 自定義配置。

進(jìn)入項(xiàng)目目錄并啟動(dòng)開發(fā)服務(wù)器：

cd vue-spa-demo
npm run serve

你的項(xiàng)目現(xiàn)在運(yùn)行在 http://localhost:8080。

---

3. 安裝 Vue Router

Vue Router 是 Vue.js 官方提供的路由管理工具，用于實(shí)現(xiàn) SPA 的頁(yè)面導(dǎo)航。

安裝 Vue Router：

npm install vue-router

---

4. 配置路由

在項(xiàng)目中添加路由，以下是配置步驟：

4.1 創(chuàng)建路由文件

在 src 目錄下創(chuàng)建一個(gè)名為 router/index.js 的文件，定義路由配置：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
];const router = createRouter({history: createWebHistory(),routes
});export default router;

4.2 創(chuàng)建頁(yè)面組件

在 src/views 目錄下創(chuàng)建兩個(gè)頁(yè)面組件：

Home.vue：

<template><div><h1>首頁(yè)</h1><p>歡迎來到單頁(yè)應(yīng)用的首頁(yè)！</p></div>
</template><script>
export default {name: 'Home'
};
</script>

About.vue：

<template><div><h1>關(guān)于我們</h1><p>這是關(guān)于我們頁(yè)面。</p></div>
</template><script>
export default {name: 'About'
};
</script>

4.3 在主應(yīng)用中加載路由

打開 src/main.js 文件，將路由添加到 Vue 應(yīng)用中：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';createApp(App).use(router).mount('#app');

---

5. 配置導(dǎo)航菜單

在 App.vue 中添加導(dǎo)航鏈接，實(shí)現(xiàn)頁(yè)面切換：

<template><div id="app"><nav><router-link to="/">首頁(yè)</router-link><router-link to="/about">關(guān)于我們</router-link></nav><router-view></router-view></div>
</template><script>
export default {name: 'App'
};
</script><style>
nav {margin-bottom: 20px;
}
nav a {margin-right: 15px;text-decoration: none;color: blue;
}
nav a.router-link-active {font-weight: bold;color: red;
}
</style>

• <router-link>：用于創(chuàng)建路由導(dǎo)航鏈接。
• <router-view>：用于渲染當(dāng)前激活的路由組件。

---

6. 增加動(dòng)態(tài)路由

有時(shí)需要根據(jù) URL 動(dòng)態(tài)加載內(nèi)容，例如顯示用戶的個(gè)人信息。

動(dòng)態(tài)路由配置

在 router/index.js 中添加動(dòng)態(tài)路由：

{path: '/user/:id',name: 'User',component: () => import('../views/User.vue')
}

創(chuàng)建動(dòng)態(tài)頁(yè)面組件

在 src/views/User.vue 中創(chuàng)建用戶頁(yè)面：

<template><div><h1>用戶信息</h1><p>用戶 ID：{{ userId }}</p></div>
</template><script>
export default {name: 'User',computed: {userId() {return this.$route.params.id;}}
};
</script>

訪問 http://localhost:8080/user/123，頁(yè)面將顯示用戶 ID。

---

7. 添加全局狀態(tài)管理（可選）

對(duì)于更復(fù)雜的應(yīng)用，你可能需要在多個(gè)組件之間共享狀態(tài)。Vue 提供了兩種主要的解決方案：

• Vuex
• Pinia（推薦）

以下是使用 Pinia 的示例：

安裝 Pinia：

npm install pinia

配置 Pinia：

在 main.js 中注冊(cè) Pinia：

import { createPinia } from 'pinia';
const pinia = createPinia();
createApp(App).use(router).use(pinia).mount('#app');

創(chuàng)建狀態(tài)管理文件：

在 src/stores/counter.js 中創(chuàng)建一個(gè)簡(jiǎn)單的計(jì)數(shù)器狀態(tài)管理：

import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++;}}
});

使用狀態(tài)：

在組件中使用狀態(tài)：

<template><div><p>計(jì)數(shù)器：{{ counter.count }}</p><button @click="counter.increment">增加</button></div>
</template><script>
import { useCounterStore } from '../stores/counter';export default {setup() {const counter = useCounterStore();return { counter };}
};
</script>

---

總結(jié)

通過本教程，你已經(jīng)學(xué)會(huì)了如何：

1. 創(chuàng)建一個(gè) Vue.js 單頁(yè)應(yīng)用。
2. 配置路由和動(dòng)態(tài)頁(yè)面。
3. 使用 Pinia 管理全局狀態(tài)。

Vue.js 提供了靈活的工具鏈和生態(tài)系統(tǒng)，使你可以快速構(gòu)建現(xiàn)代單頁(yè)應(yīng)用。下一步，你可以嘗試集成后端 API、優(yōu)化性能，或者進(jìn)一步學(xué)習(xí)服務(wù)端渲染（SSR）和 PWA 技術(shù)。如果你有任何疑問，歡迎隨時(shí)交流！