总结一下vue里一些小技巧

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

2、组件和route使用$router.params.xx耦合度太高&＃xff0c;可尝试使用props解耦&＃xff0c;操作如图&＃xff1a;

3、解决实际应用场景下重定向问题&＃xff1a;

a、可以直接采用redirect的callbcak

b、使用路由守卫&＃xff1a;可采用全局导航守卫或者组件内导航守卫&＃xff0c;比如beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave等等&＃xff0c;但是要注意在beforeRouteEnter里不能调用this&＃xff0c;因为当守卫执行前&＃xff0c;组件实例还没被创建。也要注意beforeRouteUpdate这个钩子&＃xff0c;vue版本2.2&＃43;才可以使用&＃xff0c;个人感觉这是一个非常好用的钩子&＃xff0c;真是牛逼lity&＃xff0c;使组件拓展性提升了不是一个档次。如下图是使用全局导航守卫控制用户权限认证的小demo&＃xff1a;

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

5、尽量减少dom层级&＃xff0c;比如我们在模板里写路由跳转时&＃xff0c;虽说router-link默认为我们设置了一个a标签&＃xff0c;但是在实际场景可能不太实用&＃xff0c;我们不访使用tag这一属性&＃xff0c;直接上图&＃xff1a;

6、为了体验&＃xff0c;请给路由跳转添加一些过渡效果&＃xff0c;同操作其他标签一样&＃xff0c;给router-view套一层transtion&＃xff0c;如图&＃xff1a;

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