时间戳

首页 > 解决方案 > 使用 beforeEnter 修改 Vue 查询

vue.js - 使用 beforeEnter 修改 Vue 查询

问题描述

场景：我正在用另一个应用程序替换一个应用程序 - 两者都有一个 /search 路由可能很长的查询。新的数据结构发生了很大变化，不幸的是，旧应用程序的一些 URL 已分发到其他地方，其中包含不再存在的多个参数。

处理此问题的一种方法可能是拦截每个搜索调用，并通过查找和替换有问题的术语进行beforeEnter()修改。query我会想到这样的事情：

{
    name: "search",
    path: "/search",
    component: Records,
    beforeEnter(to, from, next) {
        let query = hackSearch(to.query);  // replaces the old terms
        next({name: 'search', query: query});
    }

},

但是，这会导致Uncaught (in promise) InternalError: too much recursion。但是，根据我对我所看到的文档和示例的理解，这个或类似的东西应该可以工作。

标签： vue.js

解决方案

这不是很好，但我进行了修改hackSearch()，因此无论是否发现有问题的术语并替换它，它都会返回。这使得上面的代码可以修改如下：

{
    name: "search",
    path: "/search",
    component: Records,
    beforeEnter(to, from, next) {
        let [query, modified] = hackSearch(to.query);
        if (modified) {
            next({name: 'search', query: query});
        }
        else {
            next();
        }
    }

},

推荐阅读