Vue 路由 过渡动效 数据获取方法


Posted in Javascript onJuly 31, 2018

过渡动效

<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果:

<transition>
 <router-view></router-view>
</transition>

单个路由的过渡

上面的用法会给所有路由设置一样的过渡效果,如果你想让每个路由组件有各自的过渡效果,可以在各路由组件内使用 <transition> 并设置不同的 name。

基于路由的动态过渡

还可以基于当前路由与目标路由的变化关系,动态设置过渡效果

<!-- 使用动态的 transition name -->
<transition :name="transitionName">
 <router-view></router-view>
</transition>
// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
 '$route' (to, from) {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
 }
}

数据获取

进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据。我们可以通过两种方式来实现:

1.导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。

2.导航完成之前获取:导航完成前,在路由的 enter 钩子中获取数据,在数据获取成功后执行导航。

导航完成后获取数据

当你使用这种方式时,我们会马上导航和渲染组件,然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态,还可以在不同视图间展示不同的 loading 状态。

假设我们有一个 Post 组件,需要基于 $route.params.id 获取文章数据:

在导航完成前获取数据

通过这种方式,我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 钩子中获取数据,当数据获取成功后只调用 next 方法。

下面是地址:https://github.com/haxxk/xu_s...
https://github.com/haxxk/xu_s...

总结

以上所述是小编给大家介绍的Vue 路由 过渡动效 数据获取方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
微信小程序实现底部弹出框
Nov 18 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 #Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 #Javascript
vue实现word,pdf文件的导出功能
Jul 31 #Javascript
在create-react-app中使用css modules的示例代码
Jul 31 #Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 #Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 #jQuery
Vue导出页面为PDF格式的实现思路
Jul 31 #Javascript
You might like
phpMyadmin 用户权限中英对照
2010/04/02 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
vue.js的安装方法
2017/05/12 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
Python实现修改文件内容的方法分析
2018/03/25 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
四年级科学教学反思
2014/02/10 职场文书
作文评语怎么写
2014/12/25 职场文书
活动总结书怎么写
2015/05/11 职场文书
升学宴学生致辞
2015/07/27 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
《少年闰土》教学反思
2016/02/18 职场文书