请问,如何在地址栏正确拼接参数,有效过滤数据? ( Nuxt 框架 )

Question

首先肯定一点, 接口是 get 请求, 在接口文档中测试获取数据是 OK的,获取条件查询数据也是 OK 的.

前端:
访问 http://localhost:3000 可以获取到第1页10条数据, 因为我构建了这样的查询条件.

获取数据代码如下:

<script>

export default {

  async asyncData({app}) {

    // 获取文章列表第一页数据
    const page = { 
      total: 0,
      current: 1,
      size: 10
    }
    // 搜索条件对象
    const searchObj = {
      categoryId: null,
      categoryParentId: null,
      commentCount: null,
      viewCount: null,
      createDate: '1',
      updateDate: ''
    }
    // 查询文章第一页数据
    const {data: articleList} = await app.$getArticleList(page.current, page.size, searchObj)
    page.total = articleList.total
    let list = articleList.records

    // 查询所有分类
    const {data: categories} = await app.$getCategoryList()
    let categoryList = categories.list

    return {
      indexAdvertList,
      page,
      list,
      categoryList,
      searchObj
    }
  },

现在我要在地址栏拼接一个搜索一级分类的参数: ?categoryId=2 ( 在接口文档中测试是 OK 的)
拼接后地址: http://localhost:3000?categoryId=2

访问这个地址, 数据没有被过滤, 地址变成了 http://localhost:3000/?categoryId=2 比原来的地址在端口号后面多加了一个 / .

请问,如何在地址栏正确拼接参数,有效过滤数据?

悬赏 10元, 微信扫码支付.

Answer 1

问题已有人帮忙解决
就是在请求方法对象处多加一个 key: params:

这是我原来的方法:
inject('getArticleList', (current, size, searchObj) => $axios.$get(/article/api/article/list/${current}/${size}, searchObj))

添加参数后的方法:
inject('getArticleList', (current, size, searchObj) => $axios.$get(/article/api/article/list/${current}/${size}, {params:searchObj}))

地址栏条件传参, 成功过滤数据:
http://localhost:3000/?current=1&size=10&categoryId=2&categoryParentId=1

Answer 2

使用模板字符串

 let id=2;
url=` http://localhost:3000?categoryId=${id}`

Answer 3

我调用接口地址的方法是这样的:

// 首页条件分页分类查询文章列表: current 当前页码, size 每页显示几条, query 条件查询对象
inject('getArticleList', (current, size, searchObj) => $axios.$get(/article/api/article/list/${current}/${size}, searchObj))