使用 algolia 搜索 url 重写保持自定义 url 参数答案

【问题标题】：Persist custom url parameters with algolia search url rewriting使用 algolia 搜索 url 重写保持自定义 url 参数
【发布时间】：2020-10-31 18:39:12
【问题描述】：

我们正在使用来自 Algolia 的 vue Instantsearch。

当用户登陆带有一些初始 url 参数的页面时，algolia instantsearch 会加载初始搜索，并更改 url 以包含搜索参数。但是，当 algolia 重写 url 时，初始 url 参数不会保留，我们希望它们保留。即.e

登陆/stuff?myparam=value
algolia 设置初始搜索结果并将 url 更改为 /stuff?refinementList=... 并删除 url 参数 myparam。有没有办法将其保留在 url 中？

【问题讨论】：

标签： javascript algolia instantsearch.js vue-instant-search

【解决方案1】：

我们需要 ?lang=[LANG_CODE] 例如 ?lang=de 后跟 algolia 的东西。

这是我们想出的：（注意常量 ICL_LANGUAGE_CODE，它由 WPML (WordPress) 设置为当前语言。请记住，当搜索中没有参数时，它不需要有结尾 & 符号。

基地：

routing: '.$routing.'

其中$routing定义为：

            $routing = 'true'; // For base language
    if( $needs_custom_routing ) {
    $routing = '{
router: instantsearch.routers.history({

/*
  parseURL({ qsModule, location }) { return qsModule.parse(location.search.slice(1)); },
  */
  
createURL({ qsModule, location, routeState }) {
        const { origin, pathname, hash } = location;

        const queryParameters = {};
        if (routeState.query) {
            queryParameters.query = encodeURIComponent(routeState.query);
        }
        if (routeState.categories) {
            queryParameters.categories = routeState.categories.map(encodeURIComponent);
        }
        if (routeState.page !== 1) {
            queryParameters.page = routeState.page;
        }

    const queryString = qsModule.stringify(routeState);
                

    if( queryString ) {
        return `${origin}${pathname}?lang='.ICL_LANGUAGE_CODE.'&${queryString}`;
    } else {
        return `${origin}${pathname}?lang='.ICL_LANGUAGE_CODE.'`;   
    }
    
},      
  
})
} /* /routing */';
} // /needs_custom_routing

【讨论】：

【解决方案2】：

默认情况下，Vue InstantSearch 会覆盖查询参数。您可以通过 Vue InstantSearch 的 routing.router 选项控制在 URL 中呈现的内容。您可以为history 路由器提供自定义createURL 功能。您将能够在 URL 中保留“当前”参数。

【讨论】：