使用beforeEnter修改Vue路由search查询参数触发递归报错如何解决

错误成因 #

你写的beforeEnter逻辑触发了无限路由重定向循环：

• beforeEnter是/search路由的进入钩子，只要你导航到这个路由，它就会触发执行
• 你在钩子内调用next({name: 'search', query: query})，本质是再次触发到/search路由的导航，这会再次执行同一个beforeEnter钩子，反复进入死循环，最终触发栈溢出报错

解决方案 #

只需要加一层判断，确认参数已经处理完成后就直接放行，不要重复触发重定向即可：

{
    name: "search",
    path: "/search",
    component: Records,
    beforeEnter(to, from, next) {
        // 先处理参数
        const processedQuery = hackSearch(to.query);
        // 对比处理后的参数和当前参数是否一致，一致就直接进入路由，不一致再重定向
        if (JSON.stringify(processedQuery) === JSON.stringify(to.query)) {
            next();
        } else {
            next({name: 'search', query: processedQuery, replace: true});
        }
    }
},

你也可以根据业务逻辑调整判断逻辑优化性能：如果你的hackSearch方法会给处理后的参数加专属标记位，就可以不用全量对比参数，直接判断标记位即可：

beforeEnter(to, from, next) {
    if (to.query._processed) {
        // 已经处理过，删除标记位后直接放行
        delete to.query._processed;
        next();
    } else {
        const query = hackSearch(to.query);
        next({name: 'search', query: {...query, _processed: true}, replace: true});
    }
}

上面两段代码加的replace: true可以避免这次重定向被记录到浏览器历史栈里，用户点返回的时候不会跳转到处理前的旧参数路由。

内容的提问来源于stack exchange，提问作者knirirr