JavaScript基础课程二十二、Vue3 路由与 Pinia 状态管理

Vue3 核心进阶（路由与状态管理）

本课是 Vue3 框架开发的核心进阶内容，聚焦路由与状态管理两大必备能力。Vue Router 实现单页面多视图切换，让项目具备完整页面结构；Pinia 提供全局数据共享，解决跨组件通信难题。两者是企业级 Vue 项目的标配技术。课程从配置、使用、组件交互到实战整合，完整搭建"Vue3 + 路由 + Pinia"标准架构。掌握本课，你将具备开发多页面、数据共享、工程化规范的前端项目能力，彻底完成从基础语法到框架实战的跨越。本课内容是前端求职、项目开发、框架进阶的核心基础，也是前端开发能力成熟的重要标志。

一、课程学习目的

1. 理解前端路由的核心原理，掌握 Vue Router 路由的作用与使用场景。

2. 熟练使用 Vue Router 实现页面跳转、路由配置、嵌套路由、路由传参。

3. 理解 Pinia 状态管理的意义，解决跨组件数据共享、数据响应式问题。

4. 掌握 Pinia 定义仓库、修改数据、获取数据的基础用法。

5. 能够整合 Vue3 + 路由 + Pinia，完成多页面、数据共享的完整项目。

6. 建立 Vue 工程化项目的整体架构思维，为企业级开发奠定基础。

二、核心知识点讲解

1. Vue Router 前端路由

路由用于实现单页面（SPA）多页面切换，无需刷新页面即可切换视图，是 Vue 项目必备插件。

核心作用：管理页面路径、组件映射、页面跳转、参数传递、路由守卫。

Vue3 对应 Vue Router 4.x 版本，支持组合式 API。

2. Pinia 状态管理

Pinia 是 Vue 官方推荐的全局状态管理工具，替代 Vuex。

核心作用：跨组件共享数据，任何页面、组件都能读取/修改同一套数据，且保持响应式。

特点：轻量、简洁、支持组合式 API、无需 mutations，上手成本极低。

3. 路由核心知识点

• 路由配置：path、component、name

• 路由跳转：<router-link>、useRouter

• 路由展示：<router-view>

• 路由传参：params、query

4. Pinia 核心知识点

• 定义仓库：defineStore

• 定义 state：存储共享数据

• 定义 actions：编写修改数据的方法

• 组件使用：useStore 获取数据与方法

三、示例程序（带详细注释）

示例1：Vue Router 路由配置

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import WordList from '../views/WordList.vue'
import WordDetail from '../views/WordDetail.vue'

// 路由规则
const routes = [
  { path: '/', component: Home },
  { path: '/list', component: WordList },
  // 动态路由传参
  { path: '/detail/:word', component: WordDetail }
]

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

export default router

示例2：Pinia 状态仓库定义

// stores/wordStore.js
import { defineStore } from 'pinia'

// 定义单词仓库
export const useWordStore = defineStore('word', {
  state: () => ({
    wordList: [
      { en: 'apple', cn: '苹果' },
      { en: 'banana', cn: '香蕉' }
    ],
    currentWord: ''
  }),
  actions: {
    // 添加单词
    addWord(word) {
      this.wordList.push(word)
    },
    // 删除单词
    delWord(index) {
      this.wordList.splice(index, 1)
    }
  }
})

示例3：组件中使用路由 + Pinia

<!-- 单词列表页面 -->
<template>
  <div>
    <h2>单词库</h2>
    <ul>
      <li v-for="item in wordStore.wordList" :key="item.en">
        {{ item.en }} - {{ item.cn }}
        <button @click="toDetail(item.en)">查看详情</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useWordStore } from '../stores/wordStore'
import { useRouter } from 'vue-router'

// 调用路由
const router = useRouter()
// 获取状态仓库
const wordStore = useWordStore()

// 路由跳转传参
const toDetail = (word) => {
  router.push(`/detail/${word}`)
}
</script>

示例4：main.js 全局注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(router) // 注册路由
app.use(createPinia()) // 注册状态管理
app.mount('#app')

四、掌握技巧与方法

1. 路由配置按页面分类，路径语义化，动态路由用 /:参数 格式。

2. 组件内使用路由必须引入 useRouter / useRoute。

3. Pinia 仓库按功能拆分（用户、单词、配置等），结构更清晰。

4. 共享数据放入 Pinia，组件私有数据使用 ref/reactive。

5. 页面切换使用 <router-view> 展示，跳转优先用 router.push。

6. 路由传参不宜过长，敏感数据不放在 url 中。

7. Pinia 中修改数据直接操作 state 或写在 actions 里，规范统一。

五、课后作业

基础作业

1. 安装 Vue Router，配置 3 个页面路由（首页、单词列表、单词详情）。

2. 使用 <router-link> 实现页面导航切换。

3. 安装 Pinia，定义一个单词仓库，存储单词列表数据。

进阶作业

1. 实现路由动态传参，在详情页接收并展示单词信息。

2. 在组件中读取 Pinia 数据，使用 actions 实现添加/删除单词。

3. 实现跨组件数据共享：一个组件添加单词，另一个组件实时展示。

实战作业

1. 开发 Vue3 多页面单词管理系统，包含：首页、列表页、详情页；使用路由实现跳转；使用 Pinia 统一管理单词数据，实现增删查、页面切换、数据共享。

---

上一课：前端框架入门（Vue3 组合式 API）实战作业代码

完整实战代码

项目结构

vue3-word-demo/
├── index.html
├── package.json
└── src/
    ├── App.vue
    └── main.js

src/main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

src/App.vue

<template>
  <div class="word-container">
    <h2>{{ title }}</h2>

    <!-- 输入区域 -->
    <div class="input-box">
      <input
        v-model="inputEn"
        placeholder="请输入英文单词"
      />
      <input
        v-model="inputCn"
        placeholder="请输入中文释义"
      />
      <button @click="addWord">添加单词</button>
    </div>

    <!-- 列表渲染 -->
    <div class="list-box" v-if="wordList.length > 0">
      <div v-for="(item, index) in wordList" :key="index" class="item">
        <span>{{ item.en }} ------ {{ item.cn }}</span>
        <button @click="delWord(index)">删除</button>
      </div>
    </div>

    <!-- 空数据提示 -->
    <div class="empty" v-else>暂无单词，请点击添加</div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 响应式数据
const title = ref('Vue3 单词管理器')
const inputEn = ref('')
const inputCn = ref('')

const wordList = reactive([
  { en: 'apple', cn: '苹果' },
  { en: 'banana', cn: '香蕉' }
])

// 添加单词
const addWord = () => {
  if (!inputEn.value || !inputCn.value) {
    alert('请输入完整内容')
    return
  }
  wordList.push({
    en: inputEn.value,
    cn: inputCn.value
  })
  inputEn.value = ''
  inputCn.value = ''
}

// 删除单词
const delWord = (index) => {
  wordList.splice(index, 1)
}
</script>

<style scoped>
.word-container {
  max-width: 600px;
  margin: 30px auto;
  padding: 20px;
}
.input-box {
  margin: 20px 0;
}
input {
  padding: 8px;
  margin-right: 6px;
  width: 160px;
}
button {
  padding: 8px 12px;
  cursor: pointer;
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
}
.item {
  padding: 10px;
  background: #f5f5f5;
  margin: 6px 0;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
}
.empty {
  color: #999;
  padding: 20px 0;
  text-align: center;
}
</style>

运行命令

npm install
npm run dev

代码功能说明

本实战作业基于 Vite + Vue3 组合式 API 开发单词管理器，完全贴合课程知识点。项目使用 ref 定义响应式输入框与标题，使用 reactive 存储单词数组，通过 v-model 实现双向绑定，使用 v-for 渲染单词列表，@click 实现添加、删除功能，v-if 实现空数据提示。代码结构清晰、注释完整，可直接运行，直观展示响应式数据、模板语法、事件绑定、列表渲染、条件渲染等核心知识点，帮助巩固 Vue3 组合式 API 基础用法，为路由与状态管理打下基础。

注意事项

1. 必须先安装 Node.js 环境，使用 npm 安装依赖。

2. ref 创建的变量在 script 中需使用 .value 赋值，模板中直接使用。

3. v-for 必须绑定 :key，且 key 值必须唯一。

4. 组件样式加 scoped 避免全局污染。

5. 避免直接操作 DOM，所有视图更新依靠响应式数据驱动。

6. 代码命名遵循小驼峰规范，语义清晰，便于维护。

7. 运行命令：npm install → npm run dev。

作业验收标准

1. 项目可正常启动，页面无报错。

2. 输入单词与中文，可成功添加到列表。

3. 删除按钮可正常删除对应单词。

4. 无数据时显示空状态提示。

5. 代码使用 Vue3 组合式 API，符合规范、注释清晰。

6. 响应式数据、双向绑定、列表渲染使用正确。