Vue Router 核心知识汇总

Vue Router 是 Vue3 官方路由管理器负责页面跳转、路由参数传递、权限控制等核心功能也是 CRM 系统 “多页面结构” 的基础。结合你之前关注的Pinia onActivated下面从「核心定位→基础用法→高级实战→与 Pinia/onActivated 协同」全维度讲解贴合 CRM 开发场景。一、核心定位CRM 开发中为什么必须用CRM 系统本质是 “多页面业务系统”登录页、工作台、订单列表、订单详情、客户管理等Vue Router 解决的核心问题页面跳转比如登录后跳工作台、点击订单跳详情页路由传参比如订单详情页通过路由获取orderId权限控制比如未登录用户禁止访问工作台、不同角色访问不同页面页面缓存配合KeepAlive实现列表页缓存结合onActivated刷新。二、基础用法快速上手1. 安装与全局注册bash运行# 安装Vue3 对应 router4 npm install vue-router4typescript运行// src/router/index.ts路由入口 import { createRouter, createWebHistory } from vue-router; import Login from /views/Login.vue; import Dashboard from /views/Dashboard.vue; import OrderList from /views/OrderList.vue; import OrderDetail from /views/OrderDetail.vue; // 定义路由规则 const routes [ { path: /, // 默认路由 redirect: /login // 重定向到登录页 }, { path: /login, name: Login, // 命名路由用于 KeepAlive 缓存 component: Login }, { path: /dashboard, name: Dashboard, component: Dashboard, meta: { requiresAuth: true } // 标记需要登录才能访问 }, { path: /orders, name: OrderList, component: OrderList, meta: { requiresAuth: true, keepAlive: true } // 需要登录 缓存组件 }, { path: /orders/:id, // 动态路由参数订单ID name: OrderDetail, component: OrderDetail, meta: { requiresAuth: true }, props: true // 把路由参数映射为组件 props可选 } ]; // 创建路由实例 const router createRouter({ history: createWebHistory(import.meta.env.BASE_URL), // HTML5 历史模式 routes }); // 全局注册src/main.ts import { createApp } from vue; import { createPinia } from pinia; import App from ./App.vue; import router from ./router; const app createApp(App); app.use(createPinia()); app.use(router); app.mount(#app);2. 路由出口App.vuevuetemplate !-- 路由出口渲染匹配的组件 -- router-view v-slot{ Component } !-- 缓存指定组件结合 keepAlive 标记 -- keep-alive :include[OrderList, Dashboard] component :isComponent / /keep-alive /router-view /template3. 组件中使用路由跳转 / 传参1基础跳转比如登录页跳工作台vuescript setup langts import { useRouter } from vue-router; import { useUserStore } from /stores/user; const router useRouter(); const userStore useUserStore(); const handleLogin async () { await userStore.login(loginForm.value); // 跳转到工作台 router.push(/dashboard); // 或用命名路由推荐避免硬编码路径 // router.push({ name: Dashboard }); }; /script2动态路由传参列表页跳详情页vue!-- OrderList.vue -- script setup langts import { useRouter } from vue-router; const router useRouter(); // 点击订单跳详情页传递 orderId const handleGoDetail (orderId: string) { // 方式1路径传参 router.push(/orders/${orderId}); // 方式2命名路由 参数推荐 // router.push({ name: OrderDetail, params: { id: orderId } }); }; /script3详情页接收参数vue!-- OrderDetail.vue -- script setup langts import { useRoute } from vue-router; import { onMounted } from vue; import { useOrderStore } from /stores/order; const route useRoute(); const orderStore useOrderStore(); // 方式1直接读取路由参数 const orderId route.params.id as string; // 方式2通过 props 接收路由配置中开启 props: true // const props defineProps{ id: string }(); // const orderId props.id; // 加载订单详情 onMounted(() { orderStore.fetchOrderDetail(orderId); }); /script三、高级实战CRM 核心需求1. 路由守卫权限控制CRM 最核心的路由需求是 “权限控制”未登录禁止访问、不同角色访问不同页面通过「全局前置守卫」实现typescript运行// src/router/index.ts import { useUserStore } from /stores/user; // 全局前置守卫跳转前验证权限 router.beforeEach((to, from, next) { const userStore useUserStore(); // 判断目标页面是否需要登录 if (to.meta.requiresAuth !userStore.isLogin) { // 未登录跳登录页并记录目标页面登录后跳转回去 next({ path: /login, query: { redirect: to.fullPath } }); } else { // 已登录判断角色权限比如 admin 才能访问设置页 if (to.path /settings userStore.userInfo.role ! admin) { next(/dashboard); // 无权限跳工作台 } else { next(); // 放行 } } }); // 登录页跳转回原目标页面Login.vue const handleLogin async () { await userStore.login(loginForm.value); // 获取跳转前的目标页面默认跳工作台 const redirect route.query.redirect as string || /dashboard; router.push(redirect); };2. 与 Pinia onActivated 协同CRM 核心组合这是你最关心的点结合三者实现 “缓存 刷新 数据一致”vue!-- OrderList.vue订单列表页 -- script setup langts import { ref, onMounted, onActivated } from vue; import { useRoute } from vue-router; import { useOrderStore } from /stores/order; const route useRoute(); const orderStore useOrderStore(); const searchKey ref(); // 封装刷新逻辑 const fetchOrderList async () { // 结合路由参数比如筛选条件 Pinia 请求数据 const params { searchKey: searchKey.value, page: route.query.page || 1 // 路由传分页参数 }; await orderStore.fetchOrderList(params); }; // 第一次渲染初始化 onMounted(() { fetchOrderList(); }); // 核心从详情页返回时触发刷新组件已缓存 onActivated(() { fetchOrderList(); }); /script3. 路由参数监听筛选条件变化刷新CRM 列表页常通过路由参数传递筛选条件比如?statuspaidpage1监听参数变化刷新数据vuescript setup langts import { watch } from vue; import { useRoute } from vue-router; const route useRoute(); // 监听路由参数变化比如筛选条件、分页 watch( () route.query, () { fetchOrderList(); // 参数变化重新请求数据 }, { immediate: true } // 初始化时执行一次 ); /script四、核心避坑点CRM 开发常错1. 动态路由参数变化组件不刷新比如从/orders/1跳/orders/2详情页不重新加载数据vue!-- 解决方案监听路由参数变化 -- watch( () route.params.id, (newId) { orderStore.fetchOrderDetail(newId); // 重新加载新订单数据 }, { immediate: true } );2. KeepAlive 缓存后数据不刷新解决方案用onActivated替代onMounted做刷新逻辑前面已讲。3. 路由守卫中使用 Pinia 注意点路由守卫执行时Pinia 可能还未初始化→ 直接在守卫内调用useUserStore()即可Pinia 支持延迟初始化。五、与 Pinia/onActivated 协同总结核心逻辑表格工具核心职责协同方式Vue Router页面跳转、路由传参、权限控制1. 动态路由传参给组件如 orderId2. 路由参数传递筛选条件3. 守卫控制页面访问权限Pinia全局数据存储、异步请求封装1. 组件从 Pinia 读取数据2. Action 封装请求逻辑3. 权限判断依赖 Pinia 的用户状态onActivated缓存组件激活时刷新数据1. 返回列表页时触发刷新2. 刷新逻辑同步路由参数和 Pinia 数据六、最终总结CRM 开发最佳实践核心组合Vue Router页面跳转/权限 Pinia全局数据 onActivated缓存刷新是 CRM 开发的 “铁三角”覆盖 100% 核心场景路由设计原则按业务模块拆分路由/orders//customers//dashboard动态路由传核心参数如订单 ID查询参数传筛选 / 分页条件给需要缓存的页面加keepAlive标记配合onActivated刷新权限控制通过全局前置守卫 Pinia 的用户状态实现 “登录验证 角色权限” 双层控制Mitt 定位仅在 “跨页面 / 跨框架通信、纯 UI 动作触发” 等极特殊场景补位核心场景完全不用。这个 “铁三角” 组合是 Vue3 开发 CRM 系统的最优解既保证了代码的规范性又兼顾了用户体验缓存 按需刷新完全贴合你 “少用冗余工具、聚焦核心逻辑” 的开发思路。