在 Vue 的开发中,当出现当前页跳当前页的情况时,可能会导致导航故障。例如,在、一个一级路由叫 "搜索 search",搜索电脑会到 "search list" 路由上,当再次搜索手机时,会发现路径没有变只是参数变了,这就是当前页跳当前页。此时如果点击按钮跳转到首页,可能会跳转不过去并出现报错。导航故障的问题在 Vue2 和 Vue3 中的路由处理方式不同。
在 Vue2 中的解决方案:
在 Vue2 中,VueRouter
的 push
方法会导致当前页跳转到当前页时出现导航故障(比如路径不变化但参数发生变化)。这种情况下,异常不会自动捕获,需要通过 catch
来处理。通过重写 push
方法并加上 catch
来抑制异常,避免报错。
javascript
// Vue2 中解决导航故障的代码
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch((error) => error);
};
当路由跳转到当前路由时,如果没有实际的路径变化,Vue 会捕获这个异常而不抛出错误,从而避免页面出错。
在 Vue3 中的解决方案:
Vue3 中的路由使用的是 createRouter
和 createWebHistory
方法,并且通过重写 push
方法来解决导航故障。与 Vue2 类似,我们可以捕获 push
方法的异常:
javascript
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
// 你的路由配置
],
});
const originalPush = router.push;
router.push = function push(location) {
return originalPush.call(this, location).catch((error) => error);
};
export default router;
-
在 Vue2 和 Vue3 中,
push
方法通常用于跳转到指定的路由,如果目标路由和当前路由一致(例如参数变动但路径不变),可能会导致无法触发路由的更新,或者报错。这时我们可以通过捕获异常来确保不会影响到页面的正常操作。 -
在 Vue3 中,
createRouter
和createWebHistory
是新的路由创建方式,与 Vue2 的路由配置有所不同。重写router.push
方法时,我们仍然采用了catch
来处理异常。
通过这两种方式,无论是在 Vue2 还是 Vue3 项目中,都能有效地解决导航故障问题,保证路由的稳定性,提升用户体验。