当前位置：首页 > news >正文

【基于栈的 Vue3 路由历史管理：优雅处理多系统间的导航】

news 来源：原创 2025/5/18 9:41:08

基于栈的 Vue3 路由历史管理：优雅处理多系统间的导航

摘要

在微前端架构中，多个子系统之间的导航交互是一个复杂且棘手的问题。本文介绍了一个基于栈数据结构的路由历史管理方案，通过 Pinia 状态管理和 Vue Router 的结合，实现了清晰可控的导航流程。该方案不仅解决了系统内部页面间的返回逻辑，还优雅地处理了跨系统导航的场景，大幅提升了用户体验。

问题背景

业务场景

在我们的能源管理平台中，用户可能从外部系统进入到我们的运营平台，并在平台内部的一级菜单之间进行导航。当用户点击返回按钮时，需要满足以下需求：

在不同一级菜单之间保持导航历史，例如从总览菜单到场景运营菜单，再点击返回应该先回到总览
从总览点击返回时，才返回到外部来源系统
保持整个导航流程的连贯性和直观性

遇到的问题

在实现这一功能前，我们遇到了以下挑战：

原有实现中，一级菜单页面的返回按钮总是直接跳转到外部系统，忽略了用户在内部系统的导航路径
无法追踪用户实际的导航历史，导致用户体验割裂
难以区分是返回上一级菜单还是外部系统
跨系统导航时的状态保持困难

技术方案

核心设计

我们采用了栈结构来管理路由历史，这一数据结构天然适合处理"后进先出"的导航场景：

使用 Pinia Store 存储路由记录栈
通过路由守卫自动记录用户导航历史
基于栈操作实现智能返回逻辑
添加调试日志便于问题排查

技术实现

路由历史存储（`/src/store/route-history.ts`）:

import { defineStore } from 'pinia'
import type { RouteLocationNormalized } from 'vue-router'interface RouteRecord {path: stringname?: stringquery: Record<string, any>
}export const useRouteHistoryStore = defineStore('routeHistory', {state: () => ({stack: [] as RouteRecord[]}),actions: {push(route: RouteLocationNormalized) {const record = {path: route.path,name: route.name as string,query: route.query}this.stack.push(record)console.log('[路由栈] 入栈:', record, '当前栈:', this.stack)},pop() {const record = this.stack.pop()console.log('[路由栈] 出栈:', record, '当前栈:', this.stack)return record},peek() {return this.stack[this.stack.length - 1]},size() {return this.stack.length}}
})

路由守卫配置（`/src/router/intergrations.ts`）:

import { useRouteHistoryStore } from '@/store/route-history';export const setupRouter = (router) => {router.beforeEach((to, from, next) => {// 设置页面标题appStore.setTitle(to.meta.title)// 记录路由历史const routeHistoryStore = useRouteHistoryStore()if (to.path !== from.path) {routeHistoryStore.push(to)}next()})
};

返回逻辑处理（`/src/views/scene-run/scene/index.vue`）:

import { useRouteHistoryStore } from '@/store/route-history';
const routeHistoryStore = useRouteHistoryStore();useEmitt('map-back', () => {// 栈中至少要有一条记录if (routeHistoryStore.size() > 0) {// 先出栈当前页面routeHistoryStore.pop();// 获取新的栈顶const previous = routeHistoryStore.peek();if (previous) {// 如果还有上一页，就返回上一页mapStore.setShowMenu(true);// 触发路由变化事件window.dispatchEvent(new CustomEvent('portal-route-change', {detail: {to: previous,from: route}}));// 跳转到上一页router.replace({path: previous.path,query: previous.query});} else {// 如果没有上一页了，检查是否有外部系统参数const fromSystem = route.query.__from as string;if (fromSystem) {const systemKey = fromSystem.replace('-', '_').toUpperCase();const path = import.meta.env[`VITE_${systemKey}_URL`];if (path) {window.location.href = path;return;}}// 默认返回总览mapStore.setShowMenu(true);router.replace({ name: 'home-overview',query: {} });}}
});