总结一下vue里一些小技巧

官方里的我就不细说了，自个撸文档就成，下面是实践里经常使用的几个小技巧或者说是遇到的坑，如有错误望你们指正）
一、当用a标签设置新窗口打开页面，设置url时，建议给href进行v-bind绑定，而后写相对路径便可，它默认会继续走router-link相对路由那一套，不必在调用location的api获取hostname，而后拼接字符串。如图：

 

二、组件和route使用$router.params.xx耦合度过高，可尝试使用props解耦，操做如图：

 

三、解决实际应用场景下重定向问题：

a、能够直接采用redirect的callbcak

 

b、使用路由守卫：可采用全局导航守卫或者组件内导航守卫，好比beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave等等，可是要注意在beforeRouteEnter里不能调用this，由于当守卫执行前，组件实例还没被建立。也要注意beforeRouteUpdate这个钩子，vue版本2.2+才可使用，我的感受这是一个很是好用的钩子，真是牛逼lity，使组件拓展性提高了不是一个档次。以下图是使用全局导航守卫控制用户权限认证的小demo：

 

四、关于异步加载路由，建议单独提出一个asyncComponent.js文件，1是为了方便组件管理，改个path改个细节真的超级方便，2来当组件过多时会显得router.js内容很是拥挤，也不美观。异步引组件代码以下:

 

五、尽可能减小dom层级，好比咱们在模板里写路由跳转时，虽然说router-link默认为咱们设置了一个a标签，可是在实际场景可能不太实用，咱们不访使用tag这一属性，直接上图：

 

六、为了体验，请给路由跳转添加一些过渡效果，同操做其余标签同样，给router-view套一层transtion，如图：

 

七、切记router.push的时候不要path和params一块儿用，params会失效，建议用query，若是非要用params，可使用组件的name。并且必定要注意取数据的时候是route，不是router，千万不要被坑了，打印出来能够发现route是本路由的信息，而router是全局的router信息。
八、关于keep-alive，本人建议谨慎考虑，一方面它确实特别方便缓存组件信息，可是同时若是你缓存的组件过多，也会对性能产生必定的影响，或者你某个组件的服务端代码发生内存泄漏等状况致使浏览器反应过慢或者卡死，，那么对不起，只能从新打开一次网址了（本人亲测！！为了封装内置浏览器tab页付出了血的代价！）。。。至于具体配置，可参考同站做者：spademan
九、使用vuex存储用户信息时，刷新页面会数据丢失，建议搭配localStorage。
十、后续还会有，一时半会儿也想不起来，到时候在加吧，。。