由nginx自动补‘/’造成的“灵异事件”反思

项目上uat测试后，出现了一个“灵异事件”，且听我娓娓道来

测试的同事突然给我提了一个bug，说我页面在切换页数的时候，会把部分已经填写了但没保存的数据清空。我让测试的小伙伴重现了几次，我发现正常情况下是不会出问题的，但是他只要从另一个页面一进入该页面就立即F5刷新，再输入一些表单信息时，切换页数，表单信息就会自动重置。

该死的是，我竟没办法在我本地上去重现这个问题！

于是我绞尽脑汁在uat环境上看，却惊奇的发现，在我切换页数“灵异事件”发生的时候，会去请求一个接口，而这个接口只会在保存的时候跟页面初始化的时候调用到

于是我试探得改了一下代码，发现切换页面时竟然整个页面重新实例化了一次。我一想这不正常，于是刷新的时候看到了我从A页面进入的时候，url上是/puzzle/work?page=1，而在我刷新后url变成了puzzle/work/?page=1，在我切换到第二页的时候，url会被强制变回/puzzle/work?page=2

知道真相的我气得直跺脚，千算万算没算到问题竟然出现在这个斜杠上。准确来说不能把锅算在nginx头上

image.png

原因是nginx 这个配置，不过这个是单页应用比较常见的作法了， /puzzle/work 这个文件本来是没有的，所以就会尝试这个/puzzle/work/ ，访问这个目录的时候，就会访问到 /puzzle/work/index.html

所以我只能在前端代码中去兼容这个做法。做法很简单，就是修改切换页码的逻辑

      // 原来的代码
      const query = Object.assign({}, this.$route.query)
      query.page = this.currentPage
      const route = Object.assign({}, this.$route, {
        query
      })
      this.$router.replace(route)

正确的代码：

      // 正确的代码
      const query = Object.assign({}, this.$route.query)
      query.page = this.currentPage
      this.$router.replace({
        path: this.$route.path,
        query
      })

另外，如果用if语句或者做其他判断的时候需要对url上的参数做校验，建议大家使用$router.name 而不是$router.path，否则“灵异事件”会找上你！