VUE返回（back,gp）携参 | 蓝思同学的博客

这篇内容是在有道云旧笔记基础上重新整理的 Vue/Vite 工程实践笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。

适用场景 

Vue/Vite 项目中遇到配置、组件封装、构建或运行时问题时，作为排查入口。
需要把一次性调试经验沉淀成团队内可复用的前端工程实践。
迁移旧项目或升级依赖时，用来对照检查环境变量、插件和组件行为差异。

核心要点 

正文以代码或命令片段为主，阅读时建议先确认目标问题，再挑选对应片段验证。
保留了 2 段可直接参考的代码或命令，主要涉及 javascript，复制前需要按当前项目路径、版本和变量名做调整。
涉及命令行操作时，建议先在测试目录或测试环境执行，确认输出符合预期后再应用到生产环境。

有时候会遇到返回上一页并且携参业务，在在这里我们不使用vuex等状态数据管理，只需在router路由守卫中处理即可

返回上一页 handleReadmeClick() { this. $route.params.backCords = { closed: 1 } this.$ router.back() }

vue Router

# router/index.js  这里解决 push name的时候name不存在的问题
import { createRouter, createWebHashHistory } from 'vue-router';
import setupRouterGuards from './guards';
import basicRoutes from './routes';

export const router = createRouter({
  history: createWebHashHistory(),
  routes: [...basicRoutes],
  strict: true,
  scrollBehavior: () => ({ left: 0, top: 0, behavior: 'auto' }),
});

// 保存原始的 push 方法
const originalPush = router.push;

// 重写 push 方法, 侵入式
router.push = function push(location, ...args) {
  // 如果是通过 name 跳转，先判断是否存在
  if (typeof location === 'object' && location.name) {
    if (!router.hasRoute(location.name)) {
      return originalPush.call(this, { name: 'NotFound' });
    }
  }
  return originalPush.call(this, location, ...args);
};

// 非侵入式
router.safePush = function (location, ...args) {
  if (typeof location === 'object' && location.name) {
    if (!this.hasRoute(location.name)) {
      return router.push({ name: 'NotFound' });
    }
  }
  return router.push(location, ...args);
};

// 设置路由守卫
setupRouterGuards(router);

export const resetRouter = () => {
  const newRouter = router;
  router.matcher = newRouter.matcher;
};

export default function initRouter(app) {
  app.use(router);
}



# ...

router.beforeEach((to, from, next) => {
    // 检查目标路由是否存在
    if (to.matched.length === 0) {
      return next({ name: 'NotFound' });
    }

  //! 返回【back,gp】携参处理，新增到query参数中
  const {
    params: { backCords }
  } = from || {}
  if (backCords && Object.keys(backCords)?.length) {
    for (const iterator in backCords) {
      to.query[iterator] = backCords[iterator]
    }
  }
  
 # ...
 
});

上一页 // 接受返回是添加的参数（methods，mounted、created周期中） const { closed } = this.$route.query

实践检查清单 

先确认 Vue、Vite、Node、包管理器版本，再判断示例是否需要按当前工程结构调整。
涉及构建或插件配置时，建议同时验证开发环境和生产构建结果。
涉及 UI 或浏览器行为时，至少在桌面端和移动端各验证一次关键路径。

复盘小结 

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。

适用场景 &#8203;

核心要点 &#8203;

实践检查清单 &#8203;

复盘小结 &#8203;

适用场景

核心要点

实践检查清单

复盘小结