概述

升级的话呢，还是比较简单，就按官方文档来，改写一下某些api，本文主要讲文档中说的不清晰的一些坑

vue-router

官方文档中推荐使用watcher来监测$route的改变，当路由变化时就去服务端获取数据，这样直接监测是不对的，还是要把路由变化和获取数据两个分开来，上一篇文章中，在vue1里，我是在组件中储存了路由参数，使用router的data钩子函数来获取路由改变，并改变到组件变量中，再由一个watcher来监测组件变量的变化，这样主要是为了利用缓存，只在路由参数改变的时候，再去获取数据。而在vue2中，若直接监测$route，则每次进入当前路由，都会重新调用获取数据的函数，更可怕的是，当离开这个页面的时候，也是触发了$route的改变，很可怕了，会再请求一次数据，并且带来一些意外的bug，所以还是要按照以前的思想，只不过vue2种route的钩子函数都去掉了，所以要用组件的生命周期钩子函数activated，正确的姿势：

  activated: function(){this.bookId = this.$route.params.id;},
watch: {'bookId' : function(val){//do something}
}

多个路由参数，把路由参数放在一个对象里，使用深监测

activated: function(){this.watcher.type = this.$route.params.type;this.watcher.id = this.$route.query.id;},
watch : {'watcher' : {handler: function(val){//do somethingwindow.scrollTo(0,0);// 不使用缓存时，不使用记录好的用户位置，滑倒顶部},deep: true}
}

好，下面是一个bug，vue-router2仍然使用html5 history来记录浏览位置，但是比上次高级了很多，在history的state对象里，储存了一个key，在sesstionStorage里，用这个key做键名，浏览位置的坐标作为键值储存了浏览位置。但是，第一个页面的位置是没有记住的，进入第一个路由的时候，并没有pushState（看不懂的话麻烦自查一下history的api），所以第一个路由的key没有记录在history中，要简单的fix一下

   window.addEventListener("popstate",function(e){if(!e.state){ //第一个路由的histroy里state应该是nullif(window.sessionStorage.length > 0){ let key = Object.keys(window.sessionStorage)[0] //第一个路由的key在第一个，获取到history.replaceState({key: key}, '', window.firstPath) //用replaceState强行把这个key注入到第一个路由中，firstPath是第一个路由的path，自己想办法拿到吧let yPosition = JSON.parse(window.sessionStorage.getItem(key)).y; //获取到滚动位置window.scrollTo(0, yPosition); }}},false);

这个bug搞了我很长时间，也不知道怎么调试，只能去看源码了，发现竟然看的懂源码！最后还是fix了，很开心。（不过，不知道是不是我使用router的姿势不对，网上可供查阅的东西太少了）

vue-cli

嗯，一定要重新用新版本的vue-cli重新构建下项目，因为有很多版本不一样的模块，要不然会有些小bug（我已经忘了。）
vue-cli直接构建的项目是没有开启postcss 加css3兼容性前缀的，改一下webpack.base.conf.js

  postcss: [require('autoprefixer')({browsers: ['last 7 versions'] //这里这个数字本来是3，改成7})],