跟着AI学习vue3第三章

第三章：路由与状态管理 1. Vue Router 安装和配置： Vue Router 就像是你网页应用里的“导航员”，它知道怎么根据用户的操作，把用户带到不同的页面。要使用它，首先得把它“请”到你的项目里。就像邀请一位朋友到家里，你得通过 npm 这个“快递员”来帮忙。在项目的命令行里输入 npm install vue-router@next，这就相当于给“快递员”下了个订单，让它把 Vue Router 送到你的项目里。

安装好后，要给这位“导航员”讲讲规则，也就是配置它。在项目的 src 目录下新建一个 router 文件夹，然后在里面创建一个 index.js 文件。在这个文件里，你要告诉它每个“目的地”（页面）在哪里。

import { createRouter, createWebHistory } from 'vue-router'; // 引入你项目里的页面组件 import HomeView from '../views/HomeView.vue'; import AboutView from '../views/AboutView.vue'; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component: AboutView } ] }); export default router;

这里，createRouter 就像是创建了一个“导航系统”，createWebHistory 告诉它用哪种方式来记录用户的浏览历史，就像选择用哪种地图导航模式。routes 数组里的每一项就是一个个“导航指令”，path 是用户在浏览器地址栏输入的路径，就像地址；name 是给这个路径起的一个别名，方便在代码里引用；component 就是当用户访问这个路径时要显示的页面组件。

定义路由： 上面的配置其实就是在定义路由。比如 path: '/' 就表示当用户访问网站的根路径时，也就是打开网站的首页，会显示 HomeView 这个组件对应的页面内容。path: '/about' 则表示当用户访问 /about 路径时，会显示 AboutView 组件对应的页面。

导航守卫： 导航守卫就像是“导航员”的一些特殊规则，用来决定用户能不能去他想去的地方。比如说，有些页面只有登录后的用户才能访问。

router.beforeEach((to, from, next) => { // 假设这里有一个判断用户是否登录的函数 isLoggedIn if (to.path === '/admin' &&!isLoggedIn()) { next('/login'); // 如果用户没登录，想去 /admin 页面，就把他导航到 /login 页面 } else { next(); // 否则，就让用户继续前往他想去的页面 } });

beforeEach 是一个全局前置守卫，在每次导航发生之前都会执行这个函数。to 是即将要进入的目标路由对象，from 是当前导航正要离开的路由对象，next 函数用来控制导航的流程。

路由懒加载： 想象你的网页应用有很多页面，就像一个大商场有很多店铺。如果一开始就把所有店铺的信息都加载出来，那得多慢啊。路由懒加载就像是顾客走到哪家店铺附近了，才开始加载那家店铺的详细信息。 const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/big-page', name: 'bigPage', // 这里使用了路由懒加载，只有当用户访问 /big-page 时才会加载这个组件 component: () => import('../views/BigPageView.vue') } ] });

() => import('../views/BigPageView.vue') 这种写法就是路由懒加载，它会在需要的时候才去加载 BigPageView.vue 这个组件，大大提高了页面的初始加载速度。

2. Pinia 或 Vuex

选择状态管理库： Pinia 和 Vuex 都像是你的项目的“数据仓库管理员”，它们负责管理项目里那些需要在多个组件之间共享和修改的数据。Pinia 是 Vuex 的“年轻升级版”，它的语法更简洁，用起来更方便，就像新一代的仓库管理员，管理方式更高效。而 Vuex 功能强大，经过了长时间的考验，就像一位经验丰富的老管理员。你可以根据项目的规模和复杂度来选择。如果是一个小型项目，Pinia 可能更适合，上手快；如果是大型项目，Vuex 可能能更好地满足复杂的需求。

以 Pinia 为例学习使用： 首先，还是要通过 npm 把 Pinia 请进项目，在命令行输入 npm install pinia。

然后在 src 目录下创建一个 store 文件夹，在里面创建一个 main.js 文件（这是 Pinia 的主仓库文件）。

import { createPinia } from 'pinia'; const pinia = createPinia(); export default pinia;

这就创建了一个 Pinia 的“仓库”。接下来，你可以在这个仓库里创建不同的“小仓库”来管理不同类型的数据。比如创建一个用来管理用户信息的“小仓库”。

在 store 文件夹里创建一个 user.js 文件。

import { defineStore } from 'pinia'; export const useUserStore = defineStore('user', { state: () => ({ username: '', age: 0 }), actions: { setUserInfo(name, age) { this.username = name; this.age = age; } } });

这里，defineStore 定义了一个名为 user 的“小仓库”，state 就像是仓库里存放数据的架子，存放了 username 和 age 这两个数据。actions 就像是仓库管理员的操作手册，定义了 setUserInfo 这个方法，用来修改 username 和 age 的值。

在组件里使用这个“小仓库”：

<template> <div> <p>用户名: {{ userStore.username }}</p> <p>年龄: {{ userStore.age }}</p> <button @click="updateUser">更新用户信息</button> </div> </template> <script setup> import { useUserStore } from '../store/user.js'; const userStore = useUserStore(); const updateUser = () => { userStore.setUserInfo('张三', 25); }; </script>

在这个组件里，通过 useUserStore 引入了用户信息的“小仓库”，然后就可以在模板里显示仓库里的数据，还能通过调用 actions 里的方法来修改数据。

通过学习路由和状态管理，你就能让你的 Vue 3 项目实现页面之间的流畅跳转，并且更好地管理项目里共享的数据，让项目变得更加完整和强大。