路由多次执行相同push|replace问题

一、场景

项目中实现商品搜索功能,用户可以从导航栏点击分类搜索框输入关键词搜索商品,通过编程式导航携带参数给Search页面。此时用户可能多次点击同一分类或者搜索同一关键词,导致出现NavigationDuplicated问题。

二、原因

声明式导航并没有这个问题,因为vue-router底层已经处理好了。

而编程式导航进行路由跳转时会出现,因为最新的vue-router引入promise。

由于push方法返回promise对象,需要传递成功和失败两个参数,代码编写时push没有传递,如果没有通过参数指定成功或者失败回调函数,就返回一个promise来指定成功/失败的回调。且内部会判断如果要跳转的路径和参数都没有变化,会抛出一个失败的promise。

三、解决方法

需要给push方法传递成功和失败的回调函数,由于多次传递比较麻烦,因此可以直接重写push和replace方法(router配置文件中修改)

import Vue from "vue"
import vueRouter from "vue-router"

Vue.use(vueRouter)

import routes from '@/router/routes'
import { getToken,removeToken } from "@/utils/token"
import store from "@/store"
//保存原来的push方法和replace方法
const originPush = vueRouter.prototype.push
const originReplace = vueRouter.prototype.replace

vueRouter.prototype.push = function (location, resovled, rejected) {
    if (resovled && rejected) {
        originPush.call(this, location,resovled, rejected)
    } else {
        originPush.call(this,location, () => { }, () => { })
    }
}
vueRouter.prototype.replace = function (location, resovled, rejected) {
    if (resovled && rejected) {
        originReplace.call(this, location,resovled, rejected)
    } else {
        originReplace.call(this, location,() => { }, () => { })
    }
}

  

 

posted @ 2022-09-25 10:35  陈雪佩  阅读(151)  评论(0编辑  收藏  举报