vue报错 Uncaught (in promaise) TypeError: url.indexOf is not a function

Question

问题遇到的现象和发生背景

封装的mockjs里面的代码如下：

const Mock = require ('mockjs')
const {newslist} = Mock.mock({
    'newslist|10-12':[
        {
            "id":"@increment()",
            "title":"@ctitle(3,5)",
            "content":"@cparagraph(1,2)",
            "img_url":"@image('100x100','#ff83fa','ffffff','png','阿坤')",
            "add_time":"@now('yyyy-MM-dd HH:mm:ss')",
        }
    ]
})

// 定义拦截get请求 生成随机数据  方式1 以对象的形式
// Mock.mock('api/news','get',{
//     stus:200,
//     msg:'获取数据成功'
// })

// 定义拦截get请求 生成随机数据  方式2  以函数的形式
Mock.mock(/\api\/get\/news/,'get',(options)=>{
    console.log(options)
    const pageindex = getQuery(options.url,'pageindex')
    const pagesize = getQuery(options.url,'pagesize')
    console.log(pageindex,pagesize)
    return {
        status:200,
         msg:'获取post数据成功',
         list: newslist,
         total: newslist.length,
    }
})

// 封装方法
// 根据url获取query参数
const getQuery = (url,name)=>{
    console.log(url,name)
    const index = url.indexOf('?')
    console.log(index)
    if(index !== -1){
        const queryStrArr = url.substr(index+1).split('&')
        console.log(queryStrArr)
        for(i =0;i<queryStrArr.length ; i++){
            const itemArr = queryStrArr[i].split('=')
            console.log(itemArr)
            if(itemArr[0]===name){
                return itemArr[1]
            }
        }
    }
    return null 
}

问题相关代码，请勿粘贴截图

调用的文件如下：

<template>
  <div class="main-content">
    <div>
      <table style="color: #fff">
        <tr>
          <td>字段名称</td>
          <td>值字段</td>
        </tr>
       <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.title }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
// 引入axios插件
import axios from "axios";
export default {
  data() {
    return {
      list: [],
    };
  },
  props: {},
  components: {
    appVideo,
  },
  created() {
    this.getNewsList();
  },
  methods: {
    // 获取新闻列表数据
    getNewsList() {
      axios
        .get(/\api\/get\/news/, {
          params: {
            pageindex: 1,
            pagesize: 10,
          },
        })
        .then((response) => {
          this.list = response.data.list;
        });
    },
  },
};
</script>


<style scoped>
h1 {
  text-align: center;
}
.main-content {
  width: 100%;
  height: 100%;
  padding-top: 80px;
  box-sizing: border-box;
  position: absolute;
}

h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.hello {
  width: 750px;
  margin: 0 auto 50px;
}

@media only screen and (max-width: 640px) {
  .hello {
    width: 100%;
  }
}

.videos {
  width: 900px;
  margin: 0 auto;
}
</style>

运行结果及报错内容

报错为：Uncaught (in promise) TypeError: url.indexOf is not a function

我的解答思路和尝试过的方法

我的依赖配置文件版本如下：

  "dependencies": {
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.6",
    "hls.js": "^1.1.5",
    "less-loader": "^10.2.0",
    "mockjs": "^1.1.0",
    "pubsub-js": "^1.9.4",
    "vue": "^2.6.11",
    "vue-dplayer": "0.0.10",
    "vue-router": "^3.2.0",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

Answer 1

url.indexOf 不是一个函数 。说明 url 不是字符传 或者 数组。
你打印一下看看

getQuery 里面你打印一下看看。