跟着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 项目实现页面之间的流畅跳转，并且更好地管理项目里共享的数据，让项目变得更加完整和强大。