解决Vue中同一路由报错

最新推荐文章于 2024-07-21 20:16:04 发布

小生不才我

最新推荐文章于 2024-07-21 20:16:04 发布

阅读量300

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_34191778/article/details/126167072

版权

该博客介绍了如何在Vue Router中优雅地处理导航错误，通过覆盖push和replace方法，确保在路由跳转出错时能捕获并处理错误。无论是在JavaScript还是TypeScript环境下，都提供了相应的实现代码。

摘要由CSDN通过智能技术生成

路由跳转问题

在这里插入图片描述

Js处理版本

import VueRouter from 'vue-router';
const oldPush = VueRouter.prototype.push;
const oldReplace = VueRouter.prototype.replace;
VueRouter.prototype.push = function (location) {
  return oldPush.call(this, location).catch(err => err);
};
VueRouter.prototype.replace = function (location) {
  return oldReplace.call(this, location).catch(err => err);
};

Ts处理版本

import VueRouter, { RawLocation, Route } from 'vue-router';
const oldPush: (location: RawLocation) => Promise<Route> = VueRouter.prototype.push;
const oldReplace: (location: RawLocation) => Promise<Route> = VueRouter.prototype.replace;
VueRouter.prototype.push = function (location: RawLocation) {
  return oldPush.call(this, location).catch((err: any) => err);
};
VueRouter.prototype.replace = function (location: RawLocation) {
  return oldReplace.call(this, location).catch((err: any) => err);
};