总结一下vue里一些小技巧
官方里的我就不细说了,自个撸文档就成,下面是实践里常用的几个小技巧或者说是遇到的坑,若有错误望大家指正)
1、当用a标签设置新窗口打开页面,设置url时,建议给href进行v-bind绑定,然后写相对路径即可,它默认会继续走router-link相对路由那一套,没必要在调用location的api获取hostname,然后拼接字符串。如图:
2、组件和route使用$router.params.xx耦合度太高,可尝试使用props解耦,操作如图:
3、解决实际应用场景下重定向问题:
a、可以直接采用redirect的callbcak
b、使用路由守卫:可采用全局导航守卫或者组件内导航守卫,比如beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave等等,但是要注意在beforeRouteEnter里不能调用this,因为当守卫执行前,组件实例还没被创建。也要注意beforeRouteUpdate这个钩子,vue版本2.2+才可以使用,个人感觉这是一个非常好用的钩子,真是牛逼lity,使组件拓展性提升了不是一个档次。如下图是使用全局导航守卫控制用户权限认证的小demo:
4、关于异步加载路由,建议单独提出一个asyncComponent.js文件,1是为了方便组件管理,改个path改个细节真的超级方便,2来当组件过多时会显得router.js内容非常拥挤,也不美观。异步引组件代码如下:
5、尽量减少dom层级,比如我们在模板里写路由跳转时,虽说router-link默认为我们设置了一个a标签,但是在实际场景可能不太实用,我们不访使用tag这一属性,直接上图:
6、为了体验,请给路由跳转添加一些过渡效果,同操作其他标签一样,给router-view套一层transtion,如图:
7、切记router.push的时候不要path和params一起用,params会失效,建议用query,如果非要用params,可以使用组件的name。而且一定要注意取数据的时候是route,不是router,千万不要被坑了,打印出来可以发现route是本路由的信息,而router是全局的router信息。
8、关于keep-alive,本人建议谨慎考虑,一方面它确实特别方便缓存组件信息,但是同时如果你缓存的组件过多,也会对性能产生一定的影响,或者你某个组件的服务端代码发生内存泄漏等情况导致浏览器反应过慢或者卡死,,那么对不起,只能重新打开一次网址了(本人亲测!!为了封装内置浏览器tab页付出了血的代价!)。。。至于具体配置,可参考同站作者:spademan
9、使用vuex存储用户信息时,刷新页面会数据丢失,建议搭配localStorage。
10、后续还会有,一时半会儿也想不起来,到时候在加吧,。。
总结一下vue里一些小技巧的更多相关文章
- Vue 使用中的小技巧
在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发.下面有一些我在日常开发的时候用到的小技巧,在下将不定期更新~ 1.多图表resize事件去中心化 ...
- Vue 使用中的小技巧(山东数漫江湖)
在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发.下面有一些我在日常开发的时候用到的小技巧,在下将不定期更新~ 1. 多图表resize事件去中心 ...
- vue 使用中的小技巧 (一)
在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发.下面有一些我在日常开发的时候用到的小技巧 data 和 Object.freeze 每个Vue实 ...
- 关于Vue的一些小技巧
前言 用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候,心里大概有个谱知 ...
- vue小技巧之偷懒的文件路径——减少不必要的代码
众所周知,我们写vue项目的时候都会创建很多个文件,尤其是一些中大型项目,会有很深的文件夹,当你去引入的时候,要写很长的路径比如我要引入一个css文件, 必须得 import '../../../s ...
- sql server 小技巧(8) visual studio 2013里使用Sql server compact 4.0及发布问题处理
1. 安装 Microsoft SQL Server Compact 4.0 https://www.microsoft.com/zh-cn/download/confirmation.aspx?i ...
- Vue + Element 小技巧
说是小技巧 ,其实就是本人 就是一个小菜比 .如有大佬可以纠正,或者再救救我这个小菜比 跪谢 1.当后台返回一个字段需要根据不同字段内容在表格内显示相对应的文字(字段内容是死的,表格内需要显示对 ...
- 这几个小技巧,让你书写不一样的Vue!
前言 最近一直在阅读Vue的源码,发现了几个实战中用得上的小技巧,下面跟大家分享一下. 同时也可以阅读我之前写的Vue文章 vue开发中的"骚操作" 挖掘隐藏在源码中的Vue技巧! ...
- sql里的多行多列转一行多列小技巧
---恢复内容开始--- [ 今天下午接受了一个紧急小任务,是将一组比赛记录统计出来,将象棋游戏玩家的两条记录在一行里面显示,进数据库看之后是首先想到的是行转列,但是一开始就觉得不对,后来写到一半确实 ...
随机推荐
- 蓝桥杯 基础练习 BASIC-19 完美的代价
基础练习 完美的代价 时间限制:1.0s 内存限制:512.0MB 问题描述 回文串,是一种特殊的字符串,它从左往右读和从右往左读是一样的.小龙龙认为回文串才是完美的.现在给你一个串,它不一定 ...
- Windows 7 下将 Tomcat Java 程序设置为 Windows Service
方法: Windows key + r -> Run dialog cmd -> console cd apache-tomcat-[version]/bin service.bat in ...
- Word中调整编号和文字的间距
鼠标放在节文字上,不用选择该级别的所有节点,直接在某一节上右键-段落-制表位-默认制表位-设置1字符或其它.完成后该级别所有节的格式都自动调整,不用一个个调整. 但是设置其它段落格式还是需要在菜单上选 ...
- 2015.1.31 DataGridView自动滚动到某行
方法一.dv.CurrentCell = dv.Rows[i].Cells[2] 但此cell不能是隐藏cell 方法二. if (dgr.Index < dv_sel_aw.FirstDisp ...
- python 面向对象之反射及内置方法
面向对象之反射及内置方法 一.静态方法(staticmethod)和类方法(classmethod) 类方法:有个默认参数cls,并且可以直接用类名去调用,可以与类属性交互(也就是可以使用类属性) 静 ...
- How to Enabling and Diabling VxDMP devices for use with Oracle ASM
Enable DMP support for ASM to make DMP devices visible to ASM as available disks To make DMP devices ...
- Eclipse中如何开启断言(Assert),方法有二
Eclipse中如何开启断言(Assert),方法有二:1.Run -> Run Configurations -> Arguments页签 -> VM arguments文本框中加 ...
- X—shell的安装以及与Linux的链接(http://www.cnblogs.com/v-weiwang/p/5029559.html)
X—shell作为一种强大的远程操作工具,使我们能够简单的去操作虚拟机,因此呢我们最好是能够在我们的电脑上进行安装. X—shell作为一个工具我们无论什么版本的都可以,在安装的时候呢也特别的简单,但 ...
- 使用LaTeX按IEEE模板写论文时的参考文献管理方法(BibTeX使用小结)
之前用LaTeX写论文时,参考文献都是手动添加管理的,真是让人很抓狂.所以这次趁着假期,简单看了一下怎么使用BibTeX对参考文献进行管理,这里以IEEE的最新模板为例. 首先说明,我之前用的是MiK ...
- c类库,委托,var ,运算符 is 和 as 。
类库(Class Library) 格式 .dll 文件 类库 就是类的仓库 c#代码被编译过以后的文件,不可阅读,不可修改,只能调用. 类库是一个综合性的面向对象的可重用类型集合,这些类 ...