前言

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

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

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

nuxt报错Request path contains unescaped characters的解决办法

解决办法

首先在参数传递的第一阶段,对参数进行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);
};
如果觉得我的文章对你有用,请随意赞赏