山东省建设工程招标中心网站整合营销理论

第三章：路由与状态管理

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) => {// 假设这里有一个判断用户是否登录的函数 isLoggedInif (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 项目实现页面之间的流畅跳转，并且更好地管理项目里共享的数据，让项目变得更加完整和强大。