Nuxt报错TypeError:Request path contains unescaped characters的解决办法

前言

遇到这个问题，肯定项目中有参数的传递，在我的使用过程中，是想把搜索关键字传递到搜索结果页面，搜索结果页面首先会接收到这个参数，然后传递到api请求中，然后作为参数进行后端请求，于是在这个过程中，出现了问题。

在解决这个之前，不妨看看这篇文章：JavaScript提取纯文本，去掉文本中的所有符号

对传递的参数进行一个清洗。

解决办法

首先在参数传递的第一阶段，对参数进行encodeURIComponent()编码。例如：

//跳转到搜索页面
location.href='/search/'+encodeURIComponent(this.keyword);

然后在接收页面正常的接收这个参数，例如这里的keyword

  asyncData({ params }){
    let categoryId = '';
    let keyword = params.keyword;
    let page = 1;
    let size = 20;
    let sort = '';
    return api.doSearch(categoryId,keyword,page,size,sort).then(res =>{
      console.log(res.data)
      return{
        searchRes:res.data,
      }
    });
  },

最后一步，再次进行encodeURIComponent()编码，选择编码的位置，可以是在api.doSearch()的参数部分，也可以是在这个方法内部

api.doSearch(categoryId,encodeURIComponent(keyword),page,size,sort)

或者

export const doSearch =(categoryId,keyword,page,size,sort)=>{
    //服务端
    return http.requestGet(baseUrl+"/portal/search?categoryId="+categoryId+"&keyword="+encodeURIComponent(keyword)+"&page="+page+"&size="+size+"&sort="+sort);
};