在列表页选中侧边目录跳转添加页，返回时如何回显选中之前的目录

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

近期写项目的时候，遇到个需求，项目里有一个列表页面，在列表里可以点添加跳转到添加页面，添加完成之后或者点击取消需要返回列表页面，这个简单，直接$router.push就完事了。谁知道测试的时候，测试给提bug了，原因是列表页面有一个侧边的地区目录，跳转添加页时候选中的哪个地区，返回列表页时候还要选中哪个地区。

这个不难，现在就来整理一下思路，首先我们肯定要知道跳转添加页的时候选中的是哪个地区，怎么知道呢？我们在跳转的时候传过去，返回的时候再传过来不就好了。

// 列表页
this.$router.push({
  path: '/add',
  query: {
    areaCode: 15
  }
})

// 添加页
this.$router.push({
  path: '/list',
  query: {
    areaCode: this.$route.query.areaCode
  }
})

然后我们在列表页获取地区数据之后，把这个id给选中就可以了，我们这里的侧边目录用的是element-ui的el-tree组件。

<el-tree
    class="filter-tree"
    :data="spaceData"
    highlight-current
    node-key="areaCode"
    :expand-on-click-node="false"
    ref="tree"
    v-loading="spaceLoading"
    :props="spaceProps"
    @current-change="spaceChange"
>
    <el-tooltip
        class="custom-tree-node"
        slot-scope="{ node }"
        :content="node.label"
        effect="light"
        placement="right-start"
    >
        <span>{{ node.label }}</span>
    </el-tooltip>
</el-tree>

getSpaceData () {
  // ...
  let queryId = this.$route.query.areaCode
  if (queryId) {
    this.$refs.tree.setCurrentKey(queryId)
  }
  // ...
}

大功告成，不过刷新几下就会发现，每次请求地区数据的之后，这个参数都会生效，都会默认选中url中这个地区，就算我选了其他地区，刷新之后还是默认选中这个地区，这可咋整？

想了想，我们在第一次参数第一次生效（也就是从添加页返回列表页默认选中之前的地区）之后，就把这个参数给删除掉是不是就好了，于是去百度，寻找如何删除地址栏参数，然后找到了这个方法history.replaceState，这里就不详细讲解了，感兴趣的同学可以去百度一下，下面附上使用方法。

/**
 * @name: 修改地址栏参数
 * @param {*} arg 要修改的参数
 * @param {*} arg_val 要修改的新值
 * @return {*}
 */
changeURLArg (arg, arg_val) {
  let url = location.href
  let unformatStr = ''
  var pattern = arg + '=([^&]*)';
  var replaceText = arg + '=' + arg_val;
  if (url.match(pattern)) {
    var tmp = '/(' + arg + '=)([^&]*)/gi';
    tmp = url.replace(eval(tmp), replaceText);
    unformatStr = tmp;
  } else {
    if (url.match('[\?]')) {
      unformatStr = url + '&' + replaceText;
    } else {
      unformatStr = url + '?' + replaceText;
    }
  }
  if (!!(window.history && history.pushState)) {
    history.replaceState(null, "", unformatStr);
  }
}

这样我们只需要在回显成功之后修改地址栏参数为空即可。

getSpaceData () {
  // ...
  let queryId = this.$route.query.areaCode
  if (queryId) {
    this.$refs.tree.setCurrentKey(queryId)
    this.changeURLArg('areaCode', '')
  }
  // ...
}

这样就大工高成了，知识点虽小，但很实用，希望可以帮助你。用这个方法同样可以实现一些函数进页面只执行一次的需求。