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);