什么是路由与状态管理？

在 Vue3 开发中，路由用于管理页面跳转，状态管理则帮助维护跨组件共享的数据。两者结合是构建复杂单页应用（SPA）的核心能力。

路由核心概念

  • Vue Router：官方推荐的路由库，支持动态路由与嵌套路由
  • 导航守卫：控制路由跳转逻辑（如权限校验）
  • 懒加载：按需加载组件提升性能
  • 404 页面：处理不存在的路由请求

状态管理方案

  • Pinia：Vue3 的新官方状态管理库（替代 Vuex）
  • Vuex：Vue2 时代的状态管理方案（仍可兼容 Vue3）
  • 模块化设计：将状态按功能划分到独立模块
  • 组合式 API：通过 useStore 管理状态

实践示例 ✅

# 安装 Vue Router
npm install vue-router@4

// 路由配置示例
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
})

图片展示 📷

Vue_Router
Pinia_State_Management

扩展阅读 📚

📌 注意：图片关键词已按规则替换空格为下划线，确保合规性。