使用rewriting搜索url重写保存自定义url参数

Question

我们正在使用来自阿尔戈利亚的vue即时搜索。

当用户使用一些初始url参数登陆页面时，algolia立即搜索加载一个初始搜索，并将url更改为包含搜索参数。然而，当藻类重写url时，最初的url参数不会持久，我们希望它们保持不变。ie.e

/stuff?myparam=value

• algolia上的
• land设置初始搜索结果并将url更改为/stuff?refinementList=...，并删除url param myparam。有办法把它保存在网址里吗？

Answer 1

令人难以置信的是，这个问题在整个互联网上没有简单的例子，这是我对它的尝试(香草JS)。

const algoliaAppId = 'APP_ID';
const algoliaApiKey = 'API_KEY';
const algoliaIndex = 'instant_search';

const search = instantsearch({
  indexName: algoliaIndex,
  algoliasearch(algoliaAppId, algoliaApiKey),
  routing: {
    router: instantsearch.routers.history({

      createURL({ qsModule, location, routeState }) {
        // current search params 
        const indexState = routeState[algoliaIndex] || {};
        const { origin, pathname, hash, search } = location;
        // grab current query string and convert to object
        const queryParameters = qsModule.parse(search.slice(1)) || {};
        
        // if there is an active search
        if (Object.keys(indexState).length ){
          // merge the search params with the current query params
          Object.assign(queryParameters, routeState);
        }else{
          // remove the search params
          delete queryParameters[algoliaIndex];
        }

        let queryString = qsModule.stringify(queryParameters);

        if(queryString.length){
          queryString = `?${queryString}`;
        }

        return `${origin}${pathname}${queryString}${hash}`;
      },

    })
  }

});

search.start();

Answer 2

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

Answer 3

我们需要?lang=LANG_CODE，比如?lang=de，然后是藻类。

这就是我们得出的结果：(注意常量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