总结一下vue里一些小技巧

码农不哭
• 阅读 9100

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

2、组件和route使用$router.params.xx耦合度太高,可尝试使用props解耦,操作如图:
总结一下vue里一些小技巧

3、解决实际应用场景下重定向问题:

a、可以直接采用redirect的callbcak

总结一下vue里一些小技巧

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

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

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

总结一下vue里一些小技巧

6、为了体验,请给路由跳转添加一些过渡效果,同操作其他标签一样,给router-view套一层transtion,如图:
总结一下vue里一些小技巧

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

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
4年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
4年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
4年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
4年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
2年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
码农不哭
码农不哭
Lv1
每个城市都会下雨,就像我走到那里都会想你。
文章
3
粉丝
0
获赞
0