前端干货 | Vue.js 踩过的坑

 

前言

 

vue如今可谓是一匹黑马，github star数已居第一位！前端开发对于vue的使用已经越来越多，它的优点就不做介绍了，本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结，帮助大家踩坑。如果喜欢的话可以点波赞，或者关注一下，希望本文可以帮到大家！

 

路由组件上请求的绑定

 

01

 

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

 

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

 

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

 

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

 

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

 

这只是我的解决。

 

----路由分析

 

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

 

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

 

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

 

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

 

 

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

 

02

 

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

 

我把列表搜索这块做成了子路由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;

 

   

 

socket.io 本地websocket 和mockjs 冲突

 

03

 

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