开发路上绊了一下脚-route

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

今天的一个报错

业务场景

切换分页的时候需要更新 url ,但是不需要刷新页面，直接使用到 this.$route.push()方法后遇到了一个报错 Avoided redundant navigation to ccurrent location："/home?pageIndex=1&pageSize=10...."。

百度上查到的方案一度都是修改 vue 的 push 方法

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

但是我还没明白为什么会有这个错误，经多次复现发现是因为重复进入 ‘同一个url’ 引起的，但是我只是想修改url，这个时候就需要加个判断，判断路由的参数（'params' or 'query'）是否完全一致，如果一致就没必要重新push了呀。

再加个判断对象是否一致的方法 - ps：刚写的没经过测试

let isObjEqual = (obj1 = {}, obj2 = {}) => {
    let _flag = true;
    let o1 = obj1 instanceof Object;
    let o2 = obj2 instanceof Object;
    
    if (Object.keys(obj1).length !== Object.keys(obj2).length) {
        _flag = false;
    }
    
    for (let key in obj1) {
        let s1 = obj1[key];
        let s2 = obj2[key];
        if (s1 !== s2) {
            _flag = false;
        }
    }
    return _flag;
}

同时记录一下如果在不刷新 url 的情况下更新页面，可以在根路由<router-view v-if="refresh"></router-view>加个 v-if 之后更新 v-if 的状态即可