1、有这样一种场景，就拿火车票购票为例：
火车票购票.png
每次点击当前车次的预定，只操作当前车次。体现在代码中就是只改变当前索引的状态，例如：
vm.items[index].status= res.data.status;
此时，Vue并不能检测到当前索引的item的status属性的变化从而更新页面渲染。查阅vue官网，有如下说明：
注意事项.png
所以，我们可以将之前的代码改写如下，从而实现数据驱动页面渲染：
vm.$set(vm.items[index], 'status', res..data.status);
2、axios使用中的问题
（1）返回值是个promise
（2）调用接口获取的数据不能JSON.parse()
（3）如果需要传递给后台的参数content-type是application/x-www-form-urlencoded
则需要
var params = new URLSearchParams();
params.append('client_id', 1);
params.append('sid', this.sid);
params.append('email', this.email);
params.append('password', this.password);
params.append('repassword', this.repassword);
params.append('captcha', this.captcha);
但是URLSearchParams的兼容性很差
兼容性
https://www.caniuse.com/#feat=urlsearchparams
如何来处理兼容性问题呢，现在有这样一个polyfill可以使用
import 'url-search-params-polyfill';
或者，如官网所述，使用qs：
qs.png
下边的参考是一篇写的很详细的博客，感谢作者
参考：https://blog.csdn.net/yisuowushinian/article/details/78088438
3、通过vue+webpack开发的前端的H5页面在Android5.1版本的机型上经常出现问题奇怪的问题，归结原因基本都是因为对ES6不兼容，但是我们已经babel转换成ES5了，有些问题依然存在。这时，babel-polyfill就派上用场了，通常可以解决大多数问题。
添加方法如下：
$ npm install --save-dev babel-polyfill
然后通过以下三种方式之一引用：
(1)
require("babel-polyfill");
(2)
import "babel-polyfill";
(3)
module.export = {
entry: [ "babel-polyfill", "./app/js"]
}
4、出现如现图所示的mismatch问题
mismatch.jpg
解决方法：出现这种错误之后可以使用命令，将vue的版本改成和vue-template-compiler的版本一致，使用命令npm install vue@2.5.16 --save，然后直接运行就可以了！
5、vue-i18n使用问题
使用vue-i18n实现国际化时data中的数据内容无法实现切换，原因也很简单，data只在页面加载的时候更新。
i18n.png
解决方法：解决方法也非常简单，只要在语言切换时重新为data中的相关数据赋值就好。
6、this.$router.push()方法失效
最近遇到一个问题，某个页面中添加的this.$router.push()方法没有生效，而且控制台没有任何报错，其他组件的该方法都正常，百思不得其解。检查了几遍代码终于发现我在beforeRouteLeave中的某个判断条件里丢失了next(),在这个条件中this.$router.push()就失效了。
7、this.$router.push()路由切换会导致下一页滚动条不会自动到顶部
如果在当前页做了滚动，然后this.$router.push()到下一页，下一页也默认发生了滚动。
解决方法：直接在下一页使用window.scrollTo(0,0)即可。
网友评论