关于vue的实战项目的总结

最近公司要求做一个用vue来完成cms网站的开发,作为一个前端小菜鸟,并且才接触vue不久,决定开始写下我的第一个技术博客来记录一下在项目当中遇见的坑和怎么解决的办法。
vue的话一般是在单页应用当中运用的比较多,cms网站也一般会用静态页面的方式来做,这次用vue做cms最大的挑战就是当刷新的时候数据无法保存。之前用的是vue组件props以及$emit来传值,但是无法保存,于是做成了动态路由,url跟cid参数,每一次刷新页面,都会进行一次数据请求,也能记录下当前位置的点击状态。代码如下:
关于vue的实战项目的总结
这样的问题还有一点,就是当路由不变,后面的cid变化,不能发起请求,这个时候就需要监测路由的变化。代码如下:
关于vue的实战项目的总结
在这个项目当中,还有一点要注意。导航li是动态请求后台数据,用v-for生成,点击li进行路由跳转,这个时候需要给点击过的li的动态添加class。用dom驱动的想法就是获取当前url中的cid与导航当中的li进行对比,找到对应的导航,添加class。但是vue用的数据驱动,这里就可以这么做:
关于vue的实战项目的总结
这里就很好的用数据驱动的思想来实现了给点击过的li动态添加class。