使用vue-router和axios传递参数时更好的一种写法

目前在实习公司工作，会经常遇到需要使用vue-router和axios的时候。

这里记录一下传参的方式，使得写出来的代码更加简洁、易懂，具有更高的可维护性。

vue-router

参考：https://router.vuejs.org/guide/essentials/named-routes.html

在使用vue-router进行push路由的时候，相比于直接push一个path路径，个人建议使用name参数。
如果以后项目变更，在router index文件中改变了path参数的话，使用path路径进行push需要对整个项目进行重新修改。而name是不变的，所以不需要修改所有的代码。

另外，如果需要push的页面带有param（例如/example/user?username=erina），不要自己拼接参数。
这里使用router的params参数是更合理的选项，例如：router.push({ name: 'user', params: { username: 'erina' } })。vue-router会自动帮你处理URL Encoding。

axios

参考：https://axios-http.com/docs/req_config

在使用axios发送带有param的请求，例如example.com?param1=value1&param2=value2时，可以使用axios的param参数，使用如下的方式构建请求，axios也会自己处理URL Encoding，不要自己拼接URL参数。

Good：

request({
    url: 'example.com',
    method: 'get',
    params: {
        param1: 'value1',
        param2: 'value2'
    }
})

Bad：

request({
    url: 'example.com?param1=' + value1 + '&param2=' + value2,
    method: 'get',
})

如果要发送带有form data的payload，使用axios的data参数，如下构建请求：

request({
    url: 'example.com',
    method: 'post',
    data: {
        key1: 'foo',
        key2: 'bar'
    }
})

切记，在发送敏感数据（例如密码等数据）时，不要将参数拼接在URL里面发送请求。使用POST方法并把数据放在payload里是更合理，也是更通用的解决方式。