vue 项目使用经验

1、路由组件上请求的绑定

    一般从一个路由跳转到并一个，这种都绑定在route activate 方法上。

如果路由有参数:id 当在路由上直接修改参数回车？发现内容并未改变。再回车就刷新页面了，这时才加载请求。

相当于修改了参数后需要f5刷新才能显示。绑定在ready上也一样。它用于初始化组件时用，对于修改参数时并没有初始化所以无法。

解决修改路由参数触发请求事件--解决：

   在初始化或勾子上绑定初始化请求。watch 监听$route.params  路由参数变化，并调用请求方法。这样在路由定义的参数修改了。就会触发请求。

这只是我的解决。

----路由分析

在当前路由上直接修改参数是不会有变化的。因为路由没变。当切换了路由如当前在detail 下切换到了list下再从列表链接切换到了detail并改变了参数。

这时路由会执行勾子函数，但是ready不一定会执行。因为route-view 配置了keep-alive 缓存时，detail在第一次时会执行ready，之后就不会执行了。

除非刷新页面。但是路由切换时勾子会执行。因为路由发生了本质变化 了，而不只是参数变化 。

所以一般意见绑定在勾子上。

2、子路由参数切换时保存当前参数状态下的搜索数据。

如上图，在此路由状态下，有三个分类，下边分类列表和搜索。

我把列表搜索这块做成了子路由subRoutes 下定义。当点击分类时切换子路由显示数据。

这用到了1里的监听路由params。

但是这里还有一个问题，就是每个列表的搜索状态。当在1分类下搜索了，切换到2分类下时1的搜索数据还在，汗。

这是因为切换并没有重新加载子路由而是，监听params触发的请求更新的数据。而search搜索对象并没有改变。

所以切换时搜索状态是公用的。

解决思路：

    search对象存储当前的状态，在searchs里存储所有状态的search对象。当切换时从searchs里读取typeid 的search对象，赋值给search。

因为分类是动态的，所以需要一个Initsearch存储初始对象。当运行时判断searchs 里是否有typeid的对象，没有initsearch 赋值添加到searchs，并赋值给search。

有呢从searchs里取出来赋值给search对象。当在本参数下操作时也就是search变化时需要保存到searchs里。

if(this.$route.params.type==undefined){return ;}var newids=this.$route.params.type+'_'+this.$route.params.id;if(this.ids==newids){//console.log('==')var obj=Object.assign({},this.search)var s=Object.assign({},this.searchs)    s[this.ids]=obj;    this.$set('searchs',s);}else{this.ids=newids;if(this.searchs[this.ids]){    var obj=Object.assign({},this.searchs[this.ids]);    console.log(this.ids,'----',obj)    this.search=obj;    }else{    var obj=Object.assign({},this.initsearch)    var s=Object.assign({},this.searchs)    s[this.ids]=obj;    //console.log('s----',s);    this.$set('searchs',s);    this.search=obj;        }}//this.ids=this.$route.params.type+'_'+this.$route.params.id;       // console.log(this.searchs)if(casetxt){        if( casetxt=='search' &&         this.search.searchtxt.length==''){          return ;        }        this.search.page=1;           }    this.search.type=this.$route.params.id;

//以上是ajax

3、socket.io 本地websocket 和mockjs 冲突。

mockjs 在页面里会拦截ajax请求，而socket.io 模块本地链接用的是http而不是ws方式。

所以socket的请求也会被拦截修改。无法实现。

解决方法是把mock放在node 服务端，在express 的get post 里用创建mock并用res.send返回json

var s=Mock.mock({'data|5-8':[{'id|+1':1,'title':"@csentence(20)"}],'totalPages|2-5':0,'errorCode':0});res.send(s);